2014/10/30

AngularJs Practice1

AngularJsの練習です。
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


最後はサンプル・アプリケーションです。

以下、サンプルコード。