AngularJSはWebサイトのテンプレートエンジンとしてだけ見てもなかなか使える

AngularJS

AngularJSは色々な事ができるし少し難しい印象もあるけど、基本的な機能だけ使っても便利だよーって話。

AngularJS(あんぎゅらーじぇいえす)

Javascriptのフレームワーク。
MV*(Model-View-ほにゃらら)設計。
データバインディングできる。
GoogleにCDNあるからきっと流行ってる。

AngularJSを使う準備

AngularJSを読み込みます。
レンダリングブロックうんぬんが気になる方も多いかもしれませんが、今回は<head>内に。

<head>
<meta charset="utf-8">
<title>しか</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

次に<body>ng-appを付けます。<body>内でAngularJSを使うよーっていう合図になります。

<body ng-app>
</body>

HTMLファイルのインクルード

<script></script>で囲んでわけわからんことするんでしょ・・・?こわいです・・・。」って思ってる人も安心。
なんと「ngInclude」機能を使うとマークアップだけでもHTMLファイルを読み込んでコードの使い回しができるんです。

よくあるメニューとコンテンツの切り離しを例にしてみます。

index.html

http://deerest.co/-page/angular-template-demo/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>シカ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app>
<h1>シカ</h1>
<div ng-include="'menu.html'"></div>
<h2 id="section1">特徴</h2>
<p>草食性で、ウシのように4つに分かれた胃を持ち、反芻による消化を行う。</p>
<!-- 省略 -->
<h2 id="section2">転載元</h2>
<p>http://ja.wikipedia.org/wiki/シカ</p>
</body>
</html>
<ul>
<li><a href="#section1">特徴</a></li>
<li><a href="#section2">転載元</a></li>
</ul>

見るべきところはindex.html<div ng-include="'menu.html'"></div>の部分のみです。
要素にng-includeを付けて、読み込みたいHTMLファイルのパスを入れるだけ。

気をつけるポイント

■ ファイルのパスの指定はクォートを付けないと機能しません。内部的にはJavascriptでやっているので、文字列として指定するためにクォートを付けないといけない仕組み。変数を使う事もできます。

■ 古いブラウザを考慮しなければ読み込む部分は<ng-include src="'menu.html'"></ng-include>でも同じことができます。

file://などでのアクセスだと読み込まれません。

テンプレートエンジン

特殊なマークアップをすることによって、変数で定義した文字列や数字などをページに描画することができます。 今回は記事の趣旨としてマークアップのみで変数の定義を行います。

先ほどのサンプルを元に変更を加えて例にしてみます。

index.html

http://deerest.co/-page/angular-template-demo2/

<body ng-app ng-init="name='シカ'">
<h1>{{name}}</h1>
<ng-include src="'menu.html'"></ng-include>
<h2 id="section1">{{name}}の特徴</h2>
<p>草食性で、ウシのように4つに分かれた胃を持ち、反芻による消化を行う。</p>
<!-- 省略 -->
<h2 id="section2">{{name}}の転載元</h2>
<p>http://ja.wikipedia.org/wiki/シカ</p>
</body>
<ul>
<li><a href="#section1">{{name}}の特徴</a></li>
<li><a href="#section2">{{name}}の転載元</a></li>
</ul>

結果

シカ

・シカの特徴
・シカの転載元

シカの特徴
草食性で、ウシのように4つに分かれた胃を持ち、反芻による消化を行う。

シカの転載元
http://ja.wikipedia.org/wiki/シカ

注目するべきところは<body ng-app ng-init="name='シカ'">{{name}}とマークアップされた部分です。

ng-initを付けることによって変数を定義することができます。定義した変数はng-initを付けたタグの配下のマークアップにのみ影響します。(<body>タグでなくても大丈夫です。)

定義した変数は{{}}で囲う事で使用することができます。
この例ではname='シカ'なので、nameシカに置き換えられます。
また、インクルードしたファイルであってもng-initを付けたタグの配下であれば適用されます。

なんらかの理由で{{}}を使いたくない場合、<span ng-bind="name"></span>などでも代用可能です。結果は<span>シカ</span>になります。(個人的にはこちらの方が構文として自然だと思う。)

もっとAngularJSを知りたくなったら

この記事での紹介はお手軽テンプレートエンジンという使い方のみに絞っているので、AngularJSを知ることによってもっと動的にWebページを運用することも可能です。
入門にオススメのページを3つほど挙げておきます。

AngularJS入門 | AngularJS 1.2 日本語リファレンス | js STUDIO
http://js.studio-kingdom.com/angularjs/guide/introduction

AngularJS入門 (全12回) - プログラミングならドットインストール
http://dotinstall.com/lessons/basic_angularjs

初心者のためのAngularJSの使い方入門 | Designup
http://designup.jp/angularjs-getstarted-337/