AngularJS入門02

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 │
└──────┘ └───────┘ └──────┘

サンプル1 – 簡単な双方向バインディング

では、実際のサンプルを見てみましょう。

このサンプルは、上のテキストボックスから入力された文字列が、下のPタグ内の文字列に表示されます。

angular.module 'MainApp', []
  .controller 'MainCtrl', [
    '$scope'
	($scope) ->
      $scope.model = 
        name: 'AngularJS'
  ]

  <div>
    <p>
      Name
      <input type="text" ng-model="model.name">
      <br>
    </p>
    <p>
      Hello <span ng-bind="model.name"></span>!!
    </p>
  </div>

実装手順は以下の通りです。

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

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

2. `$scope`の下に`model.name`を定義します。

      $scope.model = 
        name: 'AngularJS'

3. テキストボックス側に、Model($scope.model.name)とViewの結合を定義します。

      <input type="text" ng-model="model.name">

4. 最後にPタグの属性にModel($scope.model.name)との結合を定義します。

      Hello <span ng-bind="model.name"></span>!!

以上、簡単な双方向バインディングのサンプルでした。

※サンプルのソースコードと実行結果は最後にご紹介します。

サンプル2 – 簡単な双方向バインディング

次にもう少し複雑な双方向バインディングのサンプルを見てみましょう。

このサンプルはチェックボックスを使用したサンプルで、チェックボックスのON/OFFに連動して、画像が表示/非表示されます。

angular.module 'MainApp', []
  .controller 'MainCtrl', [
    '$scope'
	  ($scope) ->
      $scope.model = 
        checkbox: true
  ]

  <div>
    <input type="checkbox" ng-model="model.checkbox"> CheckBox
    <p>
      CheckBoxの値は <span ng-bind="model.checkbox"></span>
    </p>
    <div>画像：<span ng-show="model.checkbox">表示</span><span ng-hide="model.checkbox">非表示</span></div>
    <img src="https://angularjs.org/img/AngularJS-large.png" ng-show="model.checkbox" ng-click="model.checkbox=false">
    <div>
      ※画像クリックでチェックボックスをOFF
    </div>
  </div>

実装手順は以下の通りです。

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

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

2. `$scope`の下に`model.name`を定義します。

      $scope.model = 
        name: 'AngularJS'

3. INPUTタグの属性に、Model($scope.model.checkbox)との結合を定義します。

    <input type="checkbox" ng-model="model.checkbox"> CheckBox

4. SPANタグの属性に、Model($scope.model.checkbox)との結合を定義します。

    <div>画像：<span ng-show="model.checkbox">表示</span><span ng-hide="model.checkbox">非表示</span></div>

5. IMGタグの属性に、Model($scope.model.checkbox)との結合を定義します。

    <img src="https://angularjs.org/img/AngularJS-large.png" ng-show="model.checkbox" ng-click="model.checkbox=false">

6. その他拡張機能として、IMGタグがクリックされた時のイベントを追加します。
IMGタグがクリックされた場合、$scope.model.checkboxの値をfalseに置き換える処理を追加します。

    ng-click="model.checkbox=false"

※サンプルのソースコードと実行結果は最後にご紹介します。

サンプルコードの実行

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

【関連記事】
Google App Engine 第一回
Google App Engine 第二回
Javaのライブラリを手軽にテストしたい！！　Groovy入門 第1回
Google App Engine 第三回
Google App Engine 第四回
Google App Engine 第五回
Google App Engine 第六回
Google App Engine 第七回
Google App Engine 第八回
Google App Engine 第九回
Google App Engine 第十回
Google App Engine 第十一回
Google App Engine 第十二回
AngularJS入門01