よくJavaScriptにおけるMVCモデル、といった表現がされますが、単純に使うだけならテンプレートエンジンとして理解するのがお手軽に恩恵を受けられる使い方だと思います。
レヴュー画面での入力や、ユーザ情報の登録などをさくっと作ったり、インタラクティブな情報のやり取りを短時間で書けてしまいます。AjaxもOKなので、上手く使えば通信量の節約にもなりますね。
Google肝いりのプロジェクトなだけあって、公式サイトの充実度も抜群です。今後はまずJQueryとAngularJsを抑えているというのが、JavaScript書きの標準になっていく可能性があります。
とりあえず相互バインドの基本と、コントローラを使ったサンプルです。
基本的な書き方は、ng-***という名前で指定した要素をHTMLタグ内に書き込みます。
JavaScriptで作ったAngularモジュールを、まずはhtmlタグ内で読み込んでいますが、これが全てを通した基本の形となります。
JavaScriptで扱うデータ構造(M：モデル)を、コントローラ要素で制御(C：コントローラ)して、HTML(V：ビュー)に反映する形であってるでしょうか。なにはともあれ、分業しやすくて良いですね。
JavaScript内で注目すべきものは、$scope変数でしょうか。これ、this.xxx = ...... といった形で書いても基本的に上手く動きます。
ただそうすると、HTML内でコントローラを呼び出した後に、aliasを指定してそれを変数名のように使って。。。という作業が発生します。そのため最近は$scopeの使用が一般的なようです。
<!DOCTYPE html>
<html lang="ja" ng-app="angular-app">
<head>
<meta charset="utf-8">
<title>AngularJs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body>
<!-- Simple interactive directive example. You use ng-model. -->
<input type="text" ng-model="input" placeholder="input anything">
<p>You are writing: {{input}}</p>
<!-- Simple controller example. $scope helps not to use 'as ***' -->
<div ng-controller="SampleController">
<div ng-repeat = "item in items">
<b>{{item.name}}</b>: {{item.color}}
</div>
</div>
<script>
//create an angular module. This is called in html tag.
angular.module('angular-app',[])
.controller('SampleController', function($scope){
$scope.items = [
{
name: "item1",
color: "red"
},
{
name: "item2",
color: "blue"
}
];
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿