LamusicaはAngularjsを使用していますが、
再度復習でやってみる。
ドットインストールのAngularjs入門を参考にしています。
http://dotinstall.com/lessons/basic_angularjs
AngularjsとはjavascriptのMVCフレームワーク。
versionは1.2.0です。
詳細な説明については割愛しています。
以下、参考キーワード。
Directive
ディレクティブ（カスタムタグやカスタム属性）を埋め込むことでUI部品として利用できる。【ng-app】
Angularアプリケーションとしての宣言、これによって、アプリケーションのルートとなるディレクティブ。
【ng-controller】
ビューにコントローラークラスを割り当て。
【$scope】
アプリケーションのモデルを参照するオブジェクト。
コントローラーとビューをつなげる糊の役割。
【ng-model】
【ng-bind】
双方向データバインディング用ディレクティブ
【ng-repeat】
コレクションから各項目のテンプレートをインスタンス化する。
ループ用。
Filter
|date
日付フォーマット用
|uppercase/lowercase
|currency
|date:'yyyy-MM-dd'
|limitTo:5
|orderBy:'score'|limitTo:5
|orderBy:'-score'
テキストフィルター
ng-model="query"
※要素指定
ng-model="query.name"
|filter:query
ng-repeat
{{ $index + 1 }} {{$first}} {{$middle}} {{$last}}
ng-repeat="user in users|filter:query" ng-class-even="'even'" ng-class-even="'odd'"
controller nest
click event
ng-click
button ng-click="increment()"
$scope.increment = function() {
$scope.user.score++;
}
------
Form
ng-submit
デバッグ表示
validation
novalidate
required
ng-minlength="5" ng-maxlength="8"
ng-show validation message
Required!
input type="number"
input type="email"
input type="url"
checkbox
radio
select/option
API Referenceはこちら
https://docs.angularjs.org/api
AngularJs ToDo List
最後はサンプル・アプリケーションです。
以下、サンプルコード。