とりあえず良くあるサンプル的な書き方から一歩進んで、複数画面を持つアプリケーションを作成できるように、ルートの設定のこととか、サービスの作成の仕方のさわりまでを書くつもり。今回はまず前置きと、AngularJSで出てくる用語についてまとめておく。
ちなみにAngularJSってなに？ みたいなレベルの話は書かない。
ざっくり試してみてコントローラーをどう書くのかくらいは分かる人対象。
＊
基本的にサンプルとして良くあるのは、<html ng-app>みたいに書いてあって、コントローラーをwindow直下に書くようなやつだけど、複数のviewとコントローラを持ったようなものを書いていくには、angular.module()でモジュールを作成して、それにサービスとか作ったカスタムモジュールを登録していくような方法になる。こんなやつ。
angular.module('appName', [] , function($routeProvider) {
$routeProvider
.when("/", { templateUrl: "/hoge.html", controller: "HogeCtrl" })
.when("/fuga", { templateUrl: "/fuga.html", controller: "FugaCtrl" })
.otherwise({redirectTo:"/"});
}]);
で、StackOverflowとかで調べるとこういうのが普通に書いてあるんだけど、第一印象が「うわぁややこしそう！」って思う。なんかライブラリ読み込んで、htmlにng-appって書いて、コントローラー名の関数作成するだけで良いのだと思ったらなんじゃこれ！ とかなる。でも、実際は別に難しいことはなくて、というかこのあたりのことをちゃんと分かっておかないと、何画面かあるアプリケーションなんて書くとすぐコードがちらかってくる。
で、これから学習を始める前に用語について、適当にまとめておく。
とりあえず良くつかうものだけ。この辺がざっくり分かるだけでも、ずいぶん効率が上がる。
Controller(コントローラー）：
ng-controller=""っていう書き方をしているあれ。基本的にDOM操作とかは入れちゃだめ。あとフィルタとかソートも元々あるやつ使うので書くなとか。大きいリストの全体をソート＋フィルタしてから、２０件ずつスクロール毎表示みたいなのをどうやって書けば良いのかよく分からないのでついコントローラーにぶち込んでしまったのは私です。たぶんなんかやり方はあるんだと思う。
Service（サービス）：
$httpとか$scopeとかのあれ。なんで普通のwindowやlocationと似た$windowとか$locationとかあるのかってと、テストを行うときに依存性があると難しいから。依存性？ なに？ ということはここでは長すぎるので書かかない。で、ここからが重要で試験に出る部分、サービスはシングルトンで複数のコントローラーにまたがったときも同一ということ。複数の画面を持つアプリを作成するときに、一覧画面から個別編集画面に移動して、また一覧に戻るようなとき、当然データは同じものを参照した方が手っ取り早いわけだけど、その二つのコントローラー間でデータを渡すときにサービスを利用する方法がある（$routeScopeを利用する方法もある）。
もちろんそのためには自分でサービスを書く必要がある。
サービス自体は、外部に依存性をもつもの（データの呼び出しとか）をまとめるためのものという理解でたぶん良いんだと思う。
Directive(ディレクティブ) ：
ng-repeatとかng-showみたいなやつのこと。 DOM要素の操作はこれでやれ、ということで、もちろん自分でも作れる。
Module（モジュール）：
Angularのモジュール。ドキュメントによると、サービスとかフィルターとかディレクティブとかコンフィグのあつまり、ということらしい。コントローラーもこの中に含まれる。コントローラーのみしか書かないサンプルによくある書き方をしていると意識しづらいけど、アプリケーションそのものの設定とかを行うことが出来る。ちなみにWebサービス全体のことだけじゃなくて、たとえばng-infinite-scrollみたいなスクロールすると増えてくリストみたいなものもディレクティブを持ったモジュールとして作成されていて、それをアプリケーション本体のモジュールから呼び出すイメージ。
というわけで今日はここまで。
以下、AngularJSを書く上で役に立ったサイト。
参考：
Androiderに贈るAngularJS概説
Androiderじゃなくても必読。現時点で日本語で見た中で一番良いまとめだと思う。
というかこれを全部読めば私の以降の記事を読む必要は無い。まじで無い。
AngularJSのDIの仕組み、minify対策は覚えておこう！
なんでng-controllerみたいなのでグローバル関数指定するのでは駄目か非常にわかりやすい解説。
pochi / angular-doc-ja
一部分だけだけど公式の日本語訳。英語苦手なので大変ありがたい。
StackOverflowの記事沢山。
ここ見てればどうにかなる感。でもIEでの微妙な挙動関連は同じ報告はあっても解決はしない感。
