AngularJSの導入

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>
```

ブラウザで見ると。
![スクリーンショット 2014-06-17 0.01.20.png](https://qiita-image-store.s3.amazonaws.com/0/46596/9527669e-0d96-e304-fb18-4f8683cbd8fd.png)

数字を変更すると、自動的に合計金額も変更。
![スクリーンショット 2014-06-17 0.01.48.png](https://qiita-image-store.s3.amazonaws.com/0/46596/5ff3ccd3-991f-7887-36e5-e39fce2472f6.png)

削除ボタンを押すと、DOMから消失。
![スクリーンショット 2014-06-17 0.02.50.png](https://qiita-image-store.s3.amazonaws.com/0/46596/06fb45a1-c359-f2be-5632-494d221c2c1e.png)

参考までに実際に出力される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>
```