投稿サイトの続き(進展なし)
少し間が空いてしまいました。前回の続きです。が、同じところで詰まっているので、根本的に設計から見直した方が良いような気がしてきました…。
Angular.jsはMVCを基本とするフレームワークです。なのでまずはここを見直してみましょう。
1. モデル
モジュール内にvarで宣言したarticlesデータオブジェクトに相当します。モジュール内で扱うデータ構造はこれだけですね。簡単なアプリなのでそんなに変な構造にはなっていないと思います。いろいろ読んでみると、モデルは$scopeに作成するとか、サービスで構築するべきと言った記事が出て来てちょっと混乱しますね。
2. コントローラ
コントローラは4つあります。
- menuController:「記事一覧」「記事を書く」のメニューでそれぞれの表示・非表示を切り替えるために使用
- topicController : 記事に割り当てた番号で表示・非表示を切り替えるために使用
- topicEditController:個別の記事の新規作成、変更、削除を行う
- commentController:コメントの追加
他に、「topicList」ディレクティブと「writeTopic」ディレクティブを定義しています。
3. ビュー
- index.html:topicList(記事一覧)とwriteTopic(記事を書く)を配置
- topic-list.html:topicListディレクティブの本体。左の一覧と右の詳細が一緒になっているので分けた方が良いかも。
- writeTopic.html:writeTopicの本体。フォーム要素にtopicのプロパティをバインド。ボタンイベントに新規作成と変更、削除を割り当てている
気になるところ:
ビュー:
ディレクティブの分け方が大きすぎるような気がする。リストと詳細を分ける。
コントローラ:
topicEditControllerはインデックスで操作しているが、データオブジェクトで操作するようにしてみる。
(サンプルをいろいろ見ているとコントローラではデータオブジェクト単位で操作する方が良さそう)
他のサンプルを読んでいると、どこかAngular.jsの流儀に合わないコードを書いているような気がします。例えばコントローラー間で変数(このアプリの場合、記事の番号)をやりとりするのではなく、コントローラーの構成(親子関係など)を上手く考えることでもっとシンプルに実装できそうです。
今日はこの辺で。