AngularJSの起動処理とMVCパターン

AngularJSのMVCパターンと起動処理をまとめました。

(1)サンプルコードを作成しながらAngularJSのMVCパターンを学ぶ


 
AngularJSは、Modev-View-Controller(MVC)パターンをサポートしています。
 
モデル、コントローラ、ビューの役割はごく簡単には下記の役割になります。
①モデル:アプリケーションのデータ
②コントローラ:データを操作するロジック
③ビュー:データを表示するロジック
 
簡単なサンプルコードを作成し、AngularJSのMVCパターンの基本を確認しました。
 
1)サンプルコード

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>AngularJSサンプル</title>
    <script src="js/angular.min.js"></script>
    <script>
      var model = { 
        group: "果物",
        items: [
          { name: "リンゴ", price: 100},
          { name: "メロン", price: 300},
          { name: "スイカ", price: 500}
        ]
      };
      var myApp = angular.module("myApp", []);
      myApp.controller("myCtrl",function ($scope) {
        $scope.products = model;
      });
    </script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container" ng-controller="myCtrl">
      <div class="page-header">
        <h1>{{products.group}}の商品リスト</h1>
      </div>
      <table class="table">
        <thead><tr><th>名前</th><th>価格</th></tr></thead>
        <tbody><tr ng-repeat="item in products.items">
          <td>{{item.name}}</td>
          <td>{{item.price}}円</td>
        </tr></tbody>
      </table>
    </div>
  </body>
</html>

 
①モデル:アプリケーションのデータ
 
上記サンプルコードでは、データをHTMLのビューから分離して<script>要素内でJavaScriptで定義しています。
 
var model = {
 :
このサンプルコードでは、データを定義しているだけですが、サーバーからデータをロードしたり、保存、変更の操作を行ったりもします。
 
②コントローラ:データを操作するロジック
 
コントローラは、”データを操作するロジック”と簡単に記述しましたが、データを保存、修整する操作はモデルに含まれ、コントローラは、データをフォーマット、フィルターしたりする操作はビューに含まれ、厳密に分けるのは難しいです。
 
モデルとビューの間に位置し、モデルとビューを連携させる役割を持つ、ぐらいの理解でも良いと思います。
 
上記サンプルコードでは、”myApp”というAngularJSモジュールを作成し、モジュールのcontrollerメソッドで”myCtrl”という名前のコントローラを定義しています。
 
$scopeは、AngularJSのビルトインのサービス(scopeの前の”$”は、AngularJSのビルトインサービスである事を示す)で、データや機能をビューに提供する役割を持ちます。
 
コントローラで
$scope.products = model;
と設定したことによって、モデルで定義したデータをビューからproductsにアクセスできるようになります。

③ビュー:データを表示するロジック
 
“myApp”というモジュール内の”myCtrl”というコントローラで$scope.productsを定義したので、HTMLビュー内でモジュール(ng-app=”myApp”)とコントローラ(ng-controller=”myCtrl”)を指定したHTML要素内でproductsにアクセスする事が出来ます。
 
上記サンプルコードでは、下記二つの部分で使用しています。
 
{ {products.group}}
二重カーリーブラケット(波括弧、中括弧)を記述するとコントローラで設定した$scope.productsとバインディングが行われ、モデルからコントローラを経由してHTMLにデータが挿入されます。
 
<tr ng-repeat=”item in products.items”>
AngularJSのビルトインの機能であるng-repeatディレクティブによって、$scope.productsの内のitemsの配列データがテーブル内に挿入されます。
 
 

(2)起動処理


 
起動処理をオンラインマニュアルのチュートリアルを読んでまとめました。
 
・AngularJSアプリケーションを自動起動する際、ngAppディレクティブを使用します。
 
・このディレクティブを指定した要素がアプリケーションのルートになります。
 
(指定例)
<html ng-app=”phonecatApp”>
 
●アプリのブートストラップ中に行われていること
 
①依存性注入(dependency injection)に使用される”injector”が生成される。
 
②injectorがアプリのモデル用のコンテキストになるrootスコープを生成する。
 
③そのときにAngularはngAppのルート要素で開始されるDOMをコンパイルし、ディレクティブやバインディングの処理を行う。
 
・一度アプリが起動されるとマウスクリックやキー押下などのブラウザイベントが入ってくるのを待機する。
 
・イベントが発生するとAngularはモデルが更新されていないかチェックし、変更されていたらビュー内の関係するバインディングを更新してビューに反映させる。

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です