AngularJSに関するメモ

• ng-classでclass名に-を含んだものを指定する際は’‘で囲む。
  ng-class=”{‘foo-bar’: ture}”

• $inputのvalidationは<formのname属性>.<inputのname属性>.$validの形式で利用する。
  form
  form
  input
  NgModelController
  入力値バリデーション関係のディレクティブ
  required
  ng-required
  ng-minlength
  ng-maxlength
  ng-pattern
  ng-change

• ng-trimで両端の空白を削除

• $routeProviderにあるwhenメソッドで指定する第2引数のresolve属性(object)について
  resolve属性のキーはcontrollerに渡されるserivice名になる。
  値が関数の場合はserviceがinjectedされてその関数を実行する。
  関数の戻り値がpromiseの場合は値を送られるまでcontrollerは生成されない。

• $routeProviderで指定するテンプレートにはng-controllerの指定は不要です。

• jqLiteで実装されていないAngularJS固有のメソッド
  controller(name):
  当該要素もしくは親要素のコントローラを返す。nameに当該要素に適用されているディレクティブ名を
  指定した場合はディレクティブのコントローラを返す。
  injector():
  当該要素もしくは親要素のinjectorを返す。
  scope():
  当該要素もしくは親要素のscopeを返す。
  isolateScope():
  当該要素がディレクティブを含む。ディレクティブが独立したscopeを持っている場合そのscopeを返す。
  inheritedData():
  data()と同じ。該当要素にデータがない場合は親要素をたどってデータを取得する。

• eventについて
  $onのコールバック関数の第1引数にはイベントオブジェクトが入る。
  $onのコールバック関数で$emitや$broadcastから変数を受け取ることができる。
  $emitは親要素にイベントを伝播する。
  $broadcastは子要素にイベントを伝播する。
  event.targetScope: イベントの発生もとのscope
  event.currentScope: 現在の処理を行っているscope
  event.name: イベント名
  event.stopPropagation: $emitでイベントが発生した場合、イベントの親要素への伝播を止める。
  event.preventDefault(): event.defaultPreventedをtrueにする。
  event.defaultPrevented: event.preventDefault()がtrueになる。

• providerについて
  providerでserviceオブジェクトを生成する際は$getが呼ばれる。
  $getはサービスを返す。
  providerメソッドを利用して定義する。
  configではProviderでinjectする。 configではproviderオブジェクトの設定を行う。

• 独立したscopeを持つディレクティブが付与されている要素のngModelに対して
  値を渡す際は親要素のcontrollerのスコープが適用できるか($parentを付けるべきか)を
  考慮する。

• mock.injectの引数を_で囲んでも_は削除された状態になる。

• ng-repeatで利用する配列が[1, 2, 3, 1]のように同じ値が複数存在している場合
  ng-repeat=”value in [1, 2, 3, 1] track by $index”のように
  track by $indexを付ける必要がある。

• One-time binding *

• Domのevent handlerからeventオブジェクトを取得する際は$eventをhandlerの引数にする *

• angular.module(name, [requires], [configFn]);
  requiresがあれば新しいmoduleを作成する。
  requiresがない場合は既存のmoduleを利用する。
  moduleを作成せずに利用するとエラーになる。

• angular.module(name, [requires], [configFn])のrequiresを動的に設定する方法

  let app = angular.module("app", []);
  app.requires.push("fooModule");
  

• $httpBackend *
  下記を追加することを忘れない

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });
  

  whenとexpect

• directiveのrequire順番にlinkのcontrollersにコントローラが入る
  ^は親のディレクティブ
  何もなしはfooディレクティブとその属性
  ?は該当するディレクディブが存在しなくてもエラーにならない

// fooディレクディブの定義
require: ['foo', 'ngModel'],   
link: function(scope, element, attrs, ctrls) {   
    var fooCtrl = ctrls[0], ngModelCtrl = ctrls[1];   
}   
 

• $httpのtimeoutでキャンセルした場合、respose.stateは-1になる

• input要素に付与される属性型(A)のディレクティブからinput要素のmodelを更新したい場合はrequireに[ngModel]を指定してlinkのctrls[0]からngModelControllerを取得する。ngModelController.$setViewValue(value);ngModelController.$render()を実行する。ngModelが変化したときngChangeが実行される

• 数字をカンマ区切りにするフィルター *

• data url schemeをするには以下の処理を加える
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(http|https|data):/);
  download=”ファイル名”をHTML要素に付与する

• <option value="{{k}}" ng-repeat="(k, v) in data">{{v}}</option>

• selectのselectedを指定する際はそれのng-modelは値の型が一致するか注意する

• <ng-include src="'/foo/bar.html'"></ng-include>

• ディレクティブの定義の際にcontrollerAsを使用する際はbindToControllerを使用する。
  Controllerの定義時に$scopeを利用する必要がなくなる。
  $scope.foo = 1ではなくthis.foo = 1ができる。

• Angular1.5のdirectiveとcomponentの違い
  Comparison between Directive definition and Component definition *

• ’<’はOne-way bindings
  子コントローラの変更が親コントローラに影響をもたらさない。

• ui-routerメモ