忙しい現代社会人のために習うより慣れる AngularJS のリンク集

忙しくない人は、[公式のチュートリアル](https://docs.angularjs.org/tutorial)を頭から全部やると良いです。めんどくさくてそっちはやってないので分かりません。

1. [とりあえずここを開いてジャッヴァスクリプトを眺める](https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs)
2. [モジュールについて](http://js.studio-kingdom.com/angularjs/guide/module)
    
    基本中の基本。特に[推奨セットアップ](http://js.studio-kingdom.com/angularjs/guide/module#2)のところを見ておけば良い。

3. [DI(依存性注入)について](http://js.studio-kingdom.com/angularjs/guide/di)

    [こっち](http://qiita.com/kawaz/items/363f430d21ec729f1b7d)を読んだ方が幸せになれるかも。

    どんなサンプルを読むにあたっても、DI の仕組みを知ってないと辛くなる。仕組み自体はよくできているが取っつきづらい。

    特に **引数名で渡される実体が変わる** 部分は慣れるまで気持ち悪い気がするし、ぼくは気持ち悪い。もっと言うと、minify した場合などで変数名が変わると動作しなくなるため基本的には変数名を指定して、実体を捕捉する必要がある。

    ```javascript
    var sampleApp = angular.module('sampleApp', []);

    /** たとえば、Controller で $scope, $rootScope, $location を引数として受け取りたいとして */

    // 1. 壊れるパターン
    // minify されたコードにおいて function($a, $b, $c) {..} となるとすると、引数名で実体を捕捉できなくなるのでコードが動かなくなる
    sampleApp.controller('hogeController', function($scope, $rootScope, $location) { .. });

    // 2. 壊れないパターン
    // 配列の先頭から受け取りたい引数を String で指定し、配列末尾に受け取る関数を入れるとその指定した順番で引数が渡される
    // = 捕捉すべき引数名が変わらないので、関数側の引数名は変更されてもよい
    sampleApp.controller('hogeController', ['$scope', '$rootScope', '$location', function($scope, $rootScope, $location) { .. }]);
    ```

    他にも書き方は色々あるが、分かりづらいだけなので上記のようにしていすればいいと思う。

4. コントローラとスコープについて
    * [コントローラについて](http://js.studio-kingdom.com/angularjs/guide/controller)
    * [スコープについて](http://js.studio-kingdom.com/angularjs/guide/scope)

    特に [Angularのスコープオブジェクトとコントローラーの関連性について](http://js.studio-kingdom.com/angularjs/guide/controller#4) を読んでおけば大丈夫だろう。

5. [プロバイダーについて](http://js.studio-kingdom.com/angularjs/guide/providers)

    Provider, Constant, Value, Factory, Service について。

    どちらかというと [こっち](http://js.studio-kingdom.com/angularjs/auto/$provide) を参考にした方がわかりやすい。

    公式の説明が取っつきづらく([パルスのファルシのルシが](http://dic.nicovideo.jp/a/%E3%83%91%E3%83%AB%E3%82%B9%E3%81%AE%E3%83%95%E3%82%A1%E3%83%AB%E3%82%B7%E3%81%AE%E3%83%AB%E3%82%B7%E3%81%8C%E3%83%91%E3%83%BC%E3%82%B8%E3%81%A7%E3%82%B3%E3%82%AF%E3%83%BC%E3%83%B3)みたいな感じ)理解があまり及んでないんだが、サービスを定義する機能の1つとしての Provider とサービスを定義する機能を包括する名前としての Providers (つまり、Provider, Constant, Value, Factory, Service の全てをまとめた呼称)とが存在するということに注意してほしい。

    そして、結構重要なところなのにあまり言及されている記事がない気がする。もしくは俺がアホすぎて理解できてないのどちらかだと思う。(多分後者)


7. [ディレクティブについて](http://js.studio-kingdom.com/angularjs/guide/directive)

    長いが一通り読んでおけばいいだろう。

    [標準のディレクティブ一覧](http://js.studio-kingdom.com/angularjs/ng_directive) も合わせて確認のこと。一通り覚えとくとさらにいい。

8. [テンプレートについて](http://js.studio-kingdom.com/angularjs/guide/templates)

    これはもうディレクティブと合わせて書き方だけ覚えておけば良い。

9. [Routerまわり](http://js.studio-kingdom.com/angularjs/ngroute)

    書き方は [この辺り](https://docs.angularjs.org/tutorial/step_07) を参考に。

    また、もっと高機能なライブラリとして [angular-ui-router](https://github.com/angular-ui/ui-router) がある。

    URL ベースのステートマシンのような感じで、 state や view をネストしたり、複数のテンプレートを扱えたり、それぞれに Controller を割り当てたりなど色々できる。ただ色々できる分、気をつけないと一気にカオスになりそうなので注意。

    参考：[Nested View, Multiple View の説明とか](http://scotch.io/tutorials/javascript/angular-routing-using-ui-router)

10. テストまわり
    - [E2Eテスト](http://js.studio-kingdom.com/angularjs/guide/e2e_testing)
    - [ユニットテスト]
(http://js.studio-kingdom.com/angularjs/guide/unit_testing)
11. [tomof 神](https://twitter.com/tomof)に感謝する

大体この辺まで読むと流れはくみ取れるはず。

あとは読み物として

- [AngularJS Startup Advent Calendar 2013](http://qiita.com/advent-calendar/2013/angularjs-startup)
- [AngularJS使い方メモ](http://qiita.com/opengl-8080/items/2fe0a20c314b1c824cc5)

とか一通り読んでおく。

これでもダメなら諦めた方が良い。人類には早すぎた。