最近AngularJSフレームワークを勉強したので覚書です。
MVCのViewをhtml,CSSファイルのみでModel, ControllerをJavascriptで実現してしまうことができます。
#AngularJSフレームワークの準備
まずはAngularJSを使えるようにします。
htmlファイルのheadタグに下記コードを挿入します。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
そしてモジュール(ng-app)とコントローラ(ng-controller)を定義します。
<!DOCTYPE html>
<html ng-app = 'App'>
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body ng-controller="AppController">
...
</body>
</html>
var app = angular.module('App', []);
app.controller('AppController', function($scope){
//ここでModelとのやりとりなど。
});
angular.moduleの最初のパラメータはhtmlで定義したモジュール名、次のパラメータは依存関係（ルーティングやアニメーションを使うとき必要）を示すんですが今は省略します。
これでとりあえずAngularJSの準備ができました。
#実際に使ってみる（１）
AngularJSは基本的にディレクティブng-XXXでHTML要素のふるまいを定義して、データバインディング{{}}でControllerから送られた値を表示するということをします。
まずは簡単にボタンが押されたときテキストボックスから入力された文字を読み取ってそれを表示することをしてみましょう。
<body ng-controller="AppController">
<input type = "text" ng-model="displayText">
<input type="button" value="Go" ng-click="display()">
<h1>{{text}}</h1>
</body>
テキストボックスにng-modelでdisplayTextというモデルをつくります。
ボタンにng-clickでクリックされたときの関数display()をつくります。
h1タグにtextという値をバインディングします。
app.controller('AppController', function($scope){
$scope.display = function(){
var str = $scope.displayText;
$scope.text = str;
}
});
AngularJSでは$scopeを介してViewとのやりとりをします。まず関数display()を定義し、$scopeからdisplayTextの値をtextに代入するといった流れです。
結果はこんな感じです。
これでjQueryなどでいちいち要素を指定して値を表示しなくてもよくなります。
#実際に使ってみる（２）
AngularJSの真骨頂はこれからです。
HTMLファイルでMVCのViewをすべて任せてしまおうということでHTMLでfor文なども使えてしまいます。
例えば、
$scope.comments = [
{name: "Yamada", text: "Hello!"},
{name: "Tanaka", text: "Thanks!"},
{name: "Nakamura", text: "Yeah!"}
];
commentsという配列があったとします。これをng-repeatディレクティブをつかってループして表示します。
<div ng-repeat="comment in comments">
<h2>{{comment.name}} : {{comment.text}}</h2>
</div>
結果はこんな感じです。
今回は少しだけAngularJS使い方を紹介しましたがまだまだいろいろなディレクティブがあります。
詳しくは日本語リファレンスなどを参考にしてください。
次はAngularJSでルーティングのやり方をご紹介したいと思います。