テンプレートについて

http://docs.angularjs.org/guide/templates

Angularのテンプレートは、モデルとコントローラーからの情報に沿って、ブラウザ上にユーザーが閲覧するビューを描画する宣言型の仕様になっています。これは、静的DOM、HTML、CSSとAngular仕様の要素、Angular仕様の要素属性が該当します。 Angularの要素と属性を指定することで、Angularが振るまいと変化をテンプレートDOMに追加して、動的なビューのDOMになるように導きます。

Angularには、テンプレート内で使用可能な要素タイプと要素属性が存在します。

ディレクティブ: この属性または要素は、既存のDOM要素、または再利用するDOMコンポーネントを増強する働きをします。(ウィジット)
マークアップ: 式を要素に紐付ける二重中括弧の表記{{ }}で、これは組み込みのAngularマークアップです。
フィルター: ユーザーに表示するためのデータをフォーマット化します。
フォーム制御: ユーザー入力の検証を行います。

注意: 更に、テンプレート内で上記の要素を宣言するだけで無く、 JavaScriptコード内から、これらの要素にアクセスすることが可能です。

下記のコード(の断片)は、標準のHTMLタグをAngularディレクティブと中括弧による式の紐付けによって、シンプルなAngularテンプレートを作り上げている例になります。

<html ng-app>
 <!-- bodyタグはngControllerディレクティブによって増強されます -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- ng-clickディレクティブ付きのbuttonタグと、
        文字列式の'buttonText'を"{{}}"でラップしたマークアップです。
    -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js">
 </body>
</html>

シンプルな単一ページのアプリケーションでは、HTML、CSSとAngularのディレクティブが含まれた1つのHTMLファイル(通常はindex.html)で構成されます。より複雑なアプリケーションであれば、別のHTMLファイルのテンプレート部分である"partials"を使用して、 1つの主ページを含む複数のビューを取り扱うことが可能です。 ngViewディレクティブとの組み合わせで、 $routeサービスを使用し、 "include"で主ページ内に"partials"を含めます。このテクニックは、AngularのチュートリアルのSTEP7,8で紹介されています。

テンプレートについて

関連項目