AngularJS アプリケーション開発ガイド（出版社：オライリー・ジャパン）を学習。まずは第一章から。
angular.jsの本体はこちらから。
https://angularjs.org/
angular.jsのコンセプトは「Web開発にMVCを取り入れる」である。
AngularJSにおけるMVC。
Model: オブジェクトのプロパティ
View: Dom (Document Object Model)
Controller: JavaScriptのクラス
実際に簡単なデモを書いてみると。
shopping.html
<html ng-app> <!-- ng-app属性で, ページ内でのAngularJS適用の範囲を指定 -->
<head>
<title>ショッピングカート</title>
</head>
<body ng-controller="CartController"> <!-- コントローラによって管理される領域 -->
<h1>ご注文内容</h1>
<div ng-repeat="item in items"> <!-- items でループ -->
<span>{{item.title}}</span>
<input ng-model="item.quantity"> <!-- item.quantity で同期 -->
<!-- item.quantity が変わると自動的にここも変わる-->
<span>{{item.price | currency}}</span> <!-- currency はフィルタの一種. ドル表記になる -->
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">削除</button>
</div>
<script src="angular.min.js"></script> <!-- <script>は読み込み時間を考慮して, </body>の直前に書いたほうが良い -->
<script>
function CartController($scope) {
$scope.items = [
{title: "グラス", quantity: 9, price: 5.95},
{title: "フライパン", quantity: 13, price: 23.51},
{title: "ナイフ", quantity: 7, price: 4.54},
];
$scope.remove = function(index) {
$scope.items.splice(index, 1); // indexから1つ削除. ピュアJavaScriptのメソッド.
}
}
</script>
</body>
</html>
ブラウザで見ると。
数字を変更すると、自動的に合計金額も変更。
削除ボタンを押すと、DOMから消失。
参考までに実際に出力されるhtml。divに書いた ng-repeat="item in items" のループが効いていることがよく分かる。
実際に出力されるshopping.html
<html ng-app="" class="ng-scope">
<head>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
<title>ショッピングカート</title>
</head>
<body ng-controller="CartController" class="ng-scope">
<h1>ご注文内容</h1>
<!-- ngRepeat: item in items -->
<div ng-repeat="item in items" class="ng-scope">
<span class="ng-binding">グラス</span>
<input ng-model="item.quantity" class="ng-valid ng-dirty">
<span class="ng-binding">$5.95</span>
<span class="ng-binding">$59.50</span>
<button ng-click="remove($index)">削除</button>
</div><!-- end ngRepeat: item in items -->
<div ng-repeat="item in items" class="ng-scope">
<span class="ng-binding">フライパン</span>
<input ng-model="item.quantity" class="ng-valid ng-dirty">
<span class="ng-binding">$23.51</span>
<span class="ng-binding">$70.53</span>
<button ng-click="remove($index)">削除</button>
</div><!-- end ngRepeat: item in items -->
<div ng-repeat="item in items" class="ng-scope">
<span class="ng-binding">ナイフ</span>
<input ng-model="item.quantity" class="ng-pristine ng-valid">
<span class="ng-binding">$4.54</span>
<span class="ng-binding">$31.78</span>
<button ng-click="remove($index)">削除</button>
</div><!-- end ngRepeat: item in items -->
<script src="angular.min.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: "グラス", quantity: 9, price: 5.95},
{title: "フライパン", quantity: 13, price: 23.51},
{title: "ナイフ", quantity: 7, price: 4.54},
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>