AngularJSの起動処理とMVCパターン | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

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

※目次をクリックすると目次の下部にコンテンツが表示されます。

１．サンプルコードを作成しながらAngularJSのMVCパターンを学ぶ
２．起動処理

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

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

<!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の配列データがテーブル内に挿入されます。

起動処理

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

関連記事の目次

AngularJS

AngularJSの特徴、仕組み

ビルトインディレクティブ

サービス

カスタムディレクティブ

WordPressで使用