Angularの特徴
Angular.jsはMVCフレームワークである。
HTMLを拡張しており、「ng-model」などAngular特有の属性が存在する。
初期化コードは少なく、コールバック周りもシンプルである。
jQueryとの競合箇所は少なく、併用も可能であるとのこと。
クライアント側とサーバ側は切り分けされているためテストがしやすい。
文法の特徴
- {{}}によるデータのバインディング。
- DOMの一部分の繰り返すイテレータ機能。イテレータにフィルタを組み込むことも可能。
- バリデーション機能
- コンポーネントとして再利用するために、HTMLグループ化する
参考サイト
最初の基本
最初にAngularが管轄する範囲を決める。
範囲となる要素に「ng-app」属性を記述する。
Angularの基本
INPUT要素と表示要素をバインドするのが基本である。
バインドするには、まずINPUT要素の「ng-model」属性にプロパティを定義する。
あとは任意の表示箇所に {{プロパティ}} を記述するだけである。
以上でバインドは完了である。INPUT要素に文字を入力すると、表示箇所にも文字が連動して表示されるようになる。
ソースコード
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app>
<input type="text" ng-model="hoge">
<div>Test {{hoge}}</div>
</div>
</body>
</html>
サンプル