AngularJS学習ノート ref: http://qiita.com/higuma/items/e19d31fd7a6844ac3d3b

file0.html

doctype
html
  head
    meta(charset="UTF-8")
    script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js")
  body
    div(ng-app,ng-init="qty=1;cost=2")
      b Invoice: 
      div Quantity:
        input(type="number", ng-model="qty")
      div Costs: 
        input(type="number", ng-model="cost")
      div
        b Total: 
        | {{qty * cost | currency}}

file1.txt

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">

file10.txt

angular.callbacks._0({
  "query": {
    ...
    "results": {
      "rate": [
        { "id": "USDUSD", "Rate": "1.00", ...  },
        { "id": "USDEUR", "Rate": "0.7467", ...  },
        ...
      ] } }
});

file11.txt

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

// Angular組み込みの$windowサービスをinject
var myController = function($window) {  // パラメータ名($window)の変更は禁止!
  this.greet = function(text) { $window.alert(text); };
};

myModule.controller('myController', myController);

file12.txt

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

var myController = function(w) {    // パラメータ名は任意でよい
  this.greet = function(text) { w.alert(text); };
};
myController.$inject = ['$window']; // ここに記述する

myModule.controller('myController', myController);

file13.txt

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

var myController = function(w) {
  this.greet = function(text) { w.alert(text); };
};

myModule.controller('myController', ['$window', myController]);

file14.txt

angular.module('myModule', [])
  .controller('myController', [
    '$window',
    function(w) {
      this.greet = function(text) { w.alert(text); };
    }
  ]);

file15.html

  <button ng-click="greet()">Greet</button>
  <button ng-click="window.alert('Should not see me')">Won't greet</button>

file16.txt

angular.module('expressionExample', [])
  .controller('ExampleController', [
    '$window', '$scope',
    function($window, $scope) {
      $scope.name = 'World';
      $scope.greet = function() { $window.alert("Hello " + $scope.name); };
    }
  ]);

file17.txt

angular.module(...)
  .filter('フィルタ名', function() {
    function(入力, もしあれば引数) {
      // 戻り値がフィルタ出力
    }
  })
  .controller(...以下略...)

file18.txt

angular.module(モジュール名, [依存モジュール, ...])

file19.txt

テンプレート <=> スコープ <=> コントローラ

file2.txt

<div ng-app="モジュール名" ng-controller="コントローラ名 as 変数名">

file20.txt

   テンプレート     スコープ              コントローラ
+----------------+    +--+    +----------------------------------+
| username <---->|<-->|..|<-->|<--> $scope.username (モデル)     |
|                |    |  |    |                                  |
| sayHello() ----|--->|..|--->|---> $scope.sayHello (メソッド)   |
|                |    |  |    |                                  |
| {{greeting}} <-|<---|..|<---|---- $scope.greeting (プロパティ) |
+----------------+    +--+    +----------------------------------+

file21.css

.css-form input.ng-invalid.ng-dirty {
  background-color: #fa787e;    /* red */
}

.css-form input.ng-valid.ng-dirty {
  background-color: #78fa89;    /* green */
}

file22.txt

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

file23.txt

<svg>
  <circle cx="{{cx}}" cy="{{cy}}" r="{{r}}"></circle>
</svg>

file24.txt

<svg>
  <circle ng-attr-cx="{{cx}}" ng-attr-cy="{{cy}}" ng-attr-r="{{r}}"></circle>
</svg>

file25.txt

angular.module('アプリケーションモジュール名', [...])
  .config(['$locationProvider, function($locationProvider) {
    $locationProvider       // 設定項目は次の2つだけ
      .html5Mode(true)      // false(デフォルト)はhashbangモード
      .hashPrefix('!');     // #!...を使う場合の設定例(デフォルトは'')
  }])

file26.txt

var oldXHR = XHR;               // XHRを保存
XHR = function MockXHR() {};    // モックに差し替え(説明用:本当はJasmineのSpyなどを使う)
var myClass = new MyClass();    // このMyClassがテストの対象
myClass.doWork();               // doWorkメソッドの中でnew XHR()を使う
// MockXHRが正しい引数でメソッドコールされていたかアサーション実行(略)
XHR = oldXHR; // 元に戻す(これを忘れると何か悪いことが起きる?)

file27.txt

// 一回このようなものを作っておけば汎用ユーティリティとして使える
function mockTest(globalObject, property, mockObject, testfunc) {
  var originalProperty = globalObject[property];
  globalObject[property] = mockObject;
  // try/finallyを使えばたとえ例外が発生しても確実に復元できる
  try { testFunc.call(); }      // テスト実行
  finally { globalObject[property] = originalProperty; }    // 元に戻す
}

// 利用方法(何だかDIに似てきた?)
mockTest(window, 'XHR', function MockXHR() {}, function() {
  var myClass = new MyClass();
  myClass.doWork();
  // (略)
});

file3.txt

angular.module('モジュール名', [ /*依存モジュール(今回はなし)*/ ])
  .controller('コントローラ名', function() {
    // コンストラクタ関数のコード
    // * thisは生成中のコントローラインスタンス
    // * コントロール要素(input等)とやり取りするデータはthisのプロパティ
    // * メソッドもthisのプロパティ
    ...
    // 終了時に戻り値付きでreturnしないこと(return thisなら可)
  })

file4.coffee

angular.module('invoice1', [])
  .controller 'InvoiceController', ->
    @qty = 1
    @cost = 2
    @inCurr = 'EUR'
    @currencies = ['USD', 'EUR', 'CNY', 'JPY']
    @usdToForeignRates =
      USD: 1
      EUR: 0.74
      CNY: 6.09
      JPY: 102.6

    @total = (outCurr) -> @convertCurrency @qty * @cost, @inCurr, outCurr
    @convertCurrency = (amount, inCurr, outCurr) ->
      amount * @usdToForeignRates[outCurr] / @usdToForeignRates[inCurr]
    @pay = -> window.alert "Thanks!"
    @   # <= 注意! これを忘れると動作しない

file5.txt

テンプレート <=(スコープ)=> コントローラ(invoice2) <=> サービス(finance2)

file6.txt

angular.module('モジュール名', ['外部依存モジュール名'])
  .controller('コントローラ名', [
    '利用するサービス名(ファクトリーID)',
    function(生成したサービスのインスタンス) {
      // コントローラのコンストラクタコード
    }
  ]);

file7.txt

angular.module('モジュール名', ['サービス1', 'サービス2'])
  .controller('コントローラ名', [
    'ファクトリーID1', 'ファクトリーID2',
    function(サービス1のインスタンス, サービス2のインスタンス) {
      // コントローラのコンストラクタコード
    }
  ]);

file8.txt

angular.module('モジュール名', [/*もしあれば外部依存モジュール*/])
  .factory('ファクトリーID', function() {
      // サービスのコンストラクタコード
      // ...
      // オブジェクトリテラルを返す
      return {
        プロパティ: 値または関数,
        ...
      };
  });

file9.txt

angular.module('finance3', [/*($httpはAngular組み込みなのでここは空)*/])
  .factory('currencyConverter', [
    '$http',            // $httpサービスを利用
    function($http) {   // やはりinjectionを使う
      // この中に$httpインスタンスを「注入」して利用する
    }
  ])