AngularJSの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はモデルが更新されていないかチェックし、変更されていたらビュー内の関係するバインディングを更新してビューに反映させる。