AngularJS のチュートリアル のまとめです.
バージョンは v1.3.0-build.2670 (snapshot) です.

テストについて

単体テストには Karma, エンドツーエンドテストには Protractor を利用しています.

app.js

アプリが依存するモジュールを明示し, ルーティングを行っています.
ルーティング機能は $routeProvider が提供します.
$routeProvider は ngRoute に含まれます.
ngRoute は angular-route.js に含まれます.

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatAnimations',
  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

module の第二引数には phonecatApp モジュールが依存するモジュール名を配列で与えます. config で $routeProvider プロバイダーのメソッドによりルーティングを行っています.

filters.js フィルター

true なら ✓, false なら ✗ を出力するフィルターを追加しています.

'use strict';

/* Filters */

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

services.js サービス

$resource サービスにより RESTful クライアントが簡単に作成出来ます.
$resource は ngResource モジュールに含まれます.
ngResource は angular-resource.js に含まれます.

'use strict';

/* Services */

var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
  }]);

controllers.js コントローラ

一覧ページ用と詳細ページ用の 2 つのコントローラを定義しています.

'use strict';

/* Controllers */

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
  function($scope, Phone) {
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
  }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
  function($scope, $routeParams, Phone) {
    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
      $scope.mainImageUrl = phone.images[0];
    });

    $scope.setImage = function(imageUrl) {
      $scope.mainImageUrl = imageUrl;
    }
  }]);

Phone は services.js で定義したデータ取得用のサービスです. $routeParams にはルーティングで使用したコロン付きの部分 (when('/phones/:phoneId',...) の値が格納されます.
Phone.query() により全てのデータの取得が行われます. PhoneDetailCtrl では get の第一引数にデータ取得条件を設定しています. 第二引数はコールバック関数です.

アニメーションについて

以下のようにすると value の値が true のときに active クラスが追加されます. 動的に value の値を変更すれば active クラスが追加されたり削除されたりします.

ng-class="{active: value}"

クラス名が追加された時, 削除された時に実行する処理は以下のようにして実装できます:

var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);

phonecatAnimations.animation('.phone', function() {

  var animateUp = function(element, className, done) {
    (省略)
  }

  var animateDown = function(element, className, done) {
    (省略)
  }

  return {
    addClass: animateUp,
    removeClass: animateDown
  };
});

第二引数の className が追加/削除されたクラス名になります. 第三引数の done はアニメーションが終了したあとに呼び出されるコールバック関数を AngularJS に知らせるためのものです.

依存性などの構造

おおまかな構造です. 実際のルーティングは phonecatApp.config() によって行われます.

phonecatApp
  # ルーティング
  [module] ngRoute

  # アニメーション
  [module] phonecatAnimations
    [module] ngAnimate
    [animation] .phone

  # コントローラ
  [module] phonecatControllers
    [controller] PhoneListCtrl
      '$scope', 'Phone'
    [controller] PhoneDetailCtrl
      '$scope', '$routeParams', 'Phone'

  # フィルター
  [module] phonecatFilters
    [filter] checkmark

  # サービス(モデル)
  [module] phonecatServices
    [module] ngResource
    [factory] Phone
      '$resource'