最近、AngularJSについても良く聞くのでちょっとやってみました。また、ドットインストールです！最近、ブログを更新できてなかったので景気付けの一発です！
準備
head内に下記スクリプトを書き込む（本家サイト参照）。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
そして、htmlタグを下記のように変更する。
<html ng-app>
**ng*はAngularのng部分。
{{}}で表示する
<input type="text" ng-model="name">
<p>こんにちは！{{ name }}</p>
こんな感じで書くと、フォームに入力された値がリアルタイムで{{ name }}の部分に反映される。
コントローラで指定した情報をビューで受け取る
myscript.jsなどに、コントローラを作成する。今回はデータを作成してみた。
var mainCtrl = function($scope) {
$scope.users = [
{"name":"morita", "score":53.22},
{"name":"tanaka", "score":55.00},
{"name":"satoru", "score":58.12}
];
}
これをビュー側で取得して表示する。
<div ng-controller="mainCtrl">
<p>{{ today|date: 'yyyy-MM-dd' }}</p>
<ul>
<li ng-repeat="user in users|limitTo:2">
{{ $index }} {{ user.name|uppercase }} {{ user.score|number:4 }}
</li>
</ul>
</div>
これだけで、usersの要素を個数分だけ表示できる。ng-repeatというのはAngularJS固有の式らしい。|date: ‘yyyy-MM-dd’や|uppercaseはフィルタという機能。変数に入っている値を変化させることができる。Liquidみたいだ。
他に、
- |orderBy:’score’ で並べ替え
- |orderBy:’-score’ で逆順に並べ替え
フィルタは連結できる。
<li ng-repeat="user in users|orderBy:'score'|limitTo:5">
$indexはループ中の番号を取得できる。他に、
- $last
- $first
- $middle
があり、それぞれtrueまたはfalseで評価結果が取得できる。
コントローラは入れ子にすると、親のコントローラを継承することができる。
フォームの作成
<div ng-controller="mainCtrl">
<form novalidate name="myForm" ng-submit="addUser()">
<p>Name: <input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8"></p>
<span ng-show="myForm.name.$error.required">Required!</span>
<span ng-show="myForm.name.$error.minlength">Too short!</span>
<span ng-show="myForm.name.$error.maxlength">Too long!</span>
<p><input type="submit" value="add"></p>
</form>
</div>
- ng-submitでsubmit時の処理を指定できる。
- novalidateでHTML5で実施されるvalidationを無効にする
- requiredやng-minlengthなどでバリデーションできる。エラー文言はそれに続くng-showのあたりで調整している。
デバッグテク
<pre>{{ user|json }}</pre>
このようにしておくと入力中のモデルの中身をリアルタイムでJSON形式で出力できる。
後記
今回のレッスンは本当に導入という感じでした。ただこれに一通り目を通せばAngularJSの本家サイトで色々調べながらやる際の勘所はつかみやすいかなぁと思いました。
