2.3.10（p34）までの内容。本書の内容を丸写ししているわけでなく、いくつかのコードを一纏めにしたりアレンジを加えたりしている。そのため少し見えづらいところも。
一般的なAngularJSの構造。
index.html
<html ng-app="myApp"> <!-- 名前を付けるのを忘れずに -->
<body ng-controller="TextController">
<p>{{someText.message}}</p> <!-- view1 -->
<p ng-bind="someText.message"></p> <!-- view2 こちらでも表示可能 -->
<!--
[view 1の問題]
angluar.jsが読み込まれるまで "{{someText.message}}" という文字列が表示されることになる
-->
<!-- CDN(コンテンツ配信ネットワーク)経由 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js">
</script>
<!--
[CDNのメリット]
1. 高速なGoogleのサーバから読み込める
2. アプリケーション間にまたがってスクリプトをキャッシュできる
-> angularを扱うアプリが複数あったとしても, 同じURIから取得するから読み込みは1度のみ
-->
<script>
// moduleの定義. 第二引数は何だろう?
var myAppModule = angular.module("myApp", []);
// moduleにcontrollerを定義
// グローバル変数の汚染を防ぐメリットがある
myAppModule.controller("TextController", function($scope) { // controller
var someText = {}; // model
someText.message = "旅の始まりです";
$scope.someText = someText;
});
</script>
</body>
</html>
テンプレート、データバインディング。属性"ng-xxxxx"でイベントを付与したり、valueやclassを変更したりできる。
index2.html
<html ng-app="myApp">
<body>
<form ng-controller="StartUpController">
<!-- 見込み1: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"><br>
-->
見込み2: <input ng-model="funding.startingEstimate"><br>
推奨額: <span ng-bind="funding.needed"></span><br>
<!-- クリック, ダブルクリックに対応するディレクティブ -->
<button ng-click="requestFunding()">出資を依頼する！</button><br>
<button ng-dblclick="reset()">リセット</button><br>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js">
</script>
<script>
var myAppModule = angular.module("myApp", []);
myAppModule.controller("StartUpController", function($scope) {
$scope.funding = { startingEstimate : 0 };
// 見込み1の場合
// <input>の中身が変わった時に'のみ', 以下のfunction()が実行
// $scope.computeNeeded = function() {
// $scope.funding.needed = $scope.funding.startingEstimate * 10;
// };
// 見込み2の場合
// $scope.$watchでfunction.startingEstimateを監視対象へ
// funding.startingEstimateが変更する度に, computeNeeded()が走る
var computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch("funding.startingEstimate", computeNeeded);
$scope.requestFunding = function() {
alert("もっと顧客を増やしてからにしてください");
};
// 見込み1の場合は, 推奨額はゼロにならないことに注意
$scope.reset = function() {
$scope.funding.startingEstimate = 0;
};
});
</script>
</body>
</html>
見込みに数字を入れると自動的に推奨額が算出される。ボタンの動作はコードを見れば明らか。
index3.html
<html ng-app="myApp">
<style>
<!--
.before_add {
color : #aaaaff;
}
.after_add {
color : #ffaaaa;
}
-->
</style>
<body>
<div ng-controller="StudentListController">
<ul ng-show="listState.show">
<!-- 繰り返し -->
<li ng-repeat="student in students">
<!-- $index は0スタート -->
{{$index + 1}} : <a href="/student/view/{{student.id}}">{{student.name}}</a>,
<!-- 動的クラス変更 (ng-classではなく, classのままだと動的にならない) -->
<span ng-class="{ before_add : !isAdd, after_add : isAdd }">
<!-- $first, $middle, $last は真偽値($middleはリストの最初と最後以外でtrue -->
first : {{$first}},
middle : {{$middle}},
last : {{$last}}
</span>
</li>
<button ng-click="insertTom()">追加</button>
</ul>
<button ng-click="toggleList()">リストをトグル</button>
<!--
[補足]
src, hrefを動的に変更するには, classのときと同様にそれぞれng-src, ng-hrefを使用する.
<img ng-src="/xxx/yyy/id={{hoge_id}}">
<a ng-href="/xxx/yyy/id={{hoge_id}}">リンク</a>
-->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js">
</script>
<script>
var students = [
{ name : "メアリー", id : 1 },
{ name : "ジャック", id : 101 },
{ name : "マイケル", id : 55 }
]
var myAppModule = angular.module("myApp", []);
myAppModule.controller("StudentListController", function($scope) {
$scope.students = students;
$scope.insertTom = function() {
$scope.students.splice(1, 0, { name : "トム", id : 492 });
$scope.isAdd = true;
};
$scope.listState = { show : false };
$scope.toggleList = function() {
$scope.listState.show = !$scope.listState.show;
};
});
</script>
</body>
</html>
最初は listState.show が false のために ul は非表示。
表示。
<span ng-class="{ before_add : !isAdd, after_add : isAdd }">が効いていて first, middle, lastに css が適用されている。また、それぞれのリンク先は<a href="/student/view/{{student.id}}">で指定した通り、モデルのidになっている。
追加を押すとトム追加。
isAdd = true により class が after_add へ。適用される css が変化。
特に制御しているわけではないので、ボタンを押す度にトムが追加される。
JavaScriptのメソッドsplice()で配列を操作すれば、生徒を追加したり削除したりできる。
どうしてこのような書き方をするのか？
↓
Unobtrusive JavaScript（控えめなJavaScript）
・HTMLとJavaScriptの分離
・JavaScriptのコード散乱を防ぐ。そのためのMVC。