AngularJS入門03

2016年06月13日
CATEGORY- 1. 技術力｛技術情報｝

AngularJSとは

AngularJSとはGoogleとコミュニティにより開発されたJavaScript（MVW *1）フレームワークです。データバインディング、DI（依存注入）などの機能を保有し、複雑なアプリケーションもシンプルに実装可能です。
*1 「MVW」とは「Model View Whatever」の略で、「Model」「View」「その他何でも」という意味です。

今回も前回に引き続き、AngularJSの特徴の一つである、双方向バインディング(Two way binding)をご紹介します。

双方向バインディング(Two way binding)とは

双方向バインディングとは、MVXにおけるModelとViewを双方向で結合するための仕組みです。Modelの変更がViewに反映され、Viewの変更がModelにダイレクトに反映されます。もちろん、下記のようなModelを介して、View同士を結合することも可能です。

┌──────┐ ┌───────┐ ┌──────┐
│ View │ <=> │ Model │ <=> │ View │
└──────┘ └───────┘ └──────┘

CoffeeScript

お気づきの方もいると思いますが、前回よりScript部分をCoffeeScriptで記述しています。
CoffeeScriptについても、要所要所で解説していこうと思っております。

サンプル3 – 複雑な双方向バインディング

今回ご紹介するサンプルは、複雑な双方向バインディングです。
主に下記のディレクティブにフォーカスして説明します。
– ng-repeat
– ng-bind

このサンプルは、Modelに格納されたリスト形式のデータ（商品コード、商品名、価格）をテーブルに表示し、最後の列に税込価格（価格✖税率）を表示します。

angular.module 'MainApp', []

  .controller 'MainCtrl', [
    '$scope'
    ($scope) ->
      $scope.model = 
        list: [
          {code: 100, name: 'おにぎり（梅）', price: 120},
          {code: 101, name: 'おにぎり（鮭）', price: 150},
          {code: 200, name: '味噌汁', price: 100},
          {code: 300, name: 'のり弁', price: 380},
          {code: 301, name: '幕の内弁当', price: 500}
          {code: 302, name: 'うな重', price: 1000}
        ],
        tax: 1.08
  ]

angular.bootstrap document, ['MainApp']

<div ng-controller="MainCtrl">
  <table border="1">
    <tr>
      <th>Code</th>
      <th>商品名</th>
      <th>価格</th>
      <th>税込</th>
    </tr>
    <tr ng-repeat="item in model.list">
      <td ng-bind="item.code"></td>
      <td ng-bind="item.name"></td>
      <td ng-bind="item.price"></td>
      <td ng-bind="item.price * model.tax | number:0"></td>
    </tr>
  </table>
  <br />
  <div>
    税率: <input type="text" ng-model="model.tax">
  </div>
</div>

実装手順をStepByStepで説明していきます。

1. 始めにModuleとContollerを作成します。

Module名: MainApp
Contoller名: MainCtrl

angular.module 'MainApp', []
  .controller 'MainCtrl', []

2. 次にModelを定義します。

`$scope`の下に`model.list`（データ群）と`model.tax`（税率）を定義します。ModelはJson形式で定義できます。
下記の例では`list`（リスト形式の商品データ）と`tax`（税率）をJSONで定義しています。

      $scope.model = 
        list: [
          {code: 100, name: 'おにぎり（梅）', price: 120},
          {code: 101, name: 'おにぎり（鮭）', price: 150},
          {code: 200, name: '味噌汁', price: 100},
          {code: 300, name: 'のり弁', price: 380},
          {code: 301, name: '幕の内弁当', price: 500}
          {code: 302, name: 'うな重', price: 1000}
        ],
        tax: 1.08


3. 商品一覧の表示

`ng-repeat`を用いてテーブルを動的に作成します。
`ng-repeat`は指定したタグを繰り返します。
`ng-bind`を用いて&lt;td&gt;タグとModelを結びつけます。

下記の例では&lt;tr&gt;タグに`ng-repeat`を指定し、`model.list`をベースに
&lt;tr&gt;タグをデータの個数分繰り返します。繰り返し時は`item`に1件分のデータが格納されます。
`ng-bind`を用いてitem内のデータ（code, name, price）と&lt;td&gt;タグを結びつけま。
最後の列に税込価格の計算ロジックを定義します。
税込価格計算後の`number:0`はfilterと呼ばれる機能で、少数以下を四捨五入します。（詳しくは別の回で解説します。）


  <tr ng-repeat="item in model.list">
    <td ng-bind="item.code"></td>
    <td ng-bind="item.name"></td>
    <td ng-bind="item.price"></td>
    <td ng-bind="item.price * model.tax | number:0"></td>
  </tr>

4. 税率入力

最後に税率を変更することでリスト全体の税込価格が変更される機能を実装します。
JQueryベースで考えいると、少々面倒なロジックになりそうですね。
しかし、Angularは至ってシンプル、下記の一行で終了です。
前回説明した`ng-model`を使用してModelの内容を変更できる<input>タグを生成するだけです。
Angularの双方向バインディングはループで作成されたリストの内容も結合されています。

税率:

サンプルコードの実行

以下にjsfiddleのコードを埋め込んでいるので、ソースコードの参照とScriptを実行してみてください。

2016年06月13日
CATEGORY- 1. 技術力｛技術情報｝

AngularJS入門03

CATEGORY

LATEST ENTRY

秀長に学ぶ(3)

秀長に学ぶ(2)

秀長に学ぶ(1)

ダム式経営について

経営の安定について

TAG