HTMLの記述だけで動的ページを作成しよう（AngularJSは使うけど） #JavaScript

AngularJSが使いたくなるポイントは、いろいろなところで伝えられているので、Qiitaを活用している方々には、既に解りきったことかもしれないですが、AngularJSの利用するポイントを最近改めて気づいた良かった点に絞ってひとつ取り上げまてみます。

HTMLボキャブラリが増える

見出しに書いた通り、AngularJSを利用すると、HTMLのボキャブラリが増えるんです。
これって、結構すごいことなんじゃないですか？

AngularJSのJSファイルを読み込んでng-appを書いた時点で、HTMLのタグを利用して動きを組み入れる(SCRIPTタグを必要とせずJSを記述する)ための準備ができたことになります。
つまり、AngularJSのいろいろな資料（日本語も結構増えてきました？）に書かれているサンプルコードを読んで利用するだけで、HTML上でだれでもちょっとした動くWebページを書けるのです。

この記事で紹介したいようなHTMLファイル内の記述だけで動的にすることに絞った場合のポイントを改めて、下記に示すならば。

ひとつ目: 以下のように、headタグ内でangular.jsを読み込む（ローカルで保持したい場合はファイルをダウンロードすればいい）。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

※ 今回レガシーブラウザを含めているため、1.2.14のstableバージョンを利用しています。

ふたつ目: 以下の属性を動的にしたいエリアを囲むタグに埋め込む

ng-app

HTML5で表現力が上がりましたが、レガシーなブラウザ(IE8, IE9)の利用は今のところしばらく特定業種や組織において継続して利用されることが見込まれます。ちょっとしたインタラクティブな仕組み(メニューの開閉や小窓表示など)、シンプルな仕組みを組み込むにはレガシーなブラウザではJSやライブラリの利用は必須です。今どき、素のJavaScriptコードでそれをすることは少なくなってきましたが、
AngularJSは、上記の課題と言うか仕組みを安価に導入できます。

ただし、IE8、IE9で表示させたい場合は、みっつ目として、htmlタグの手前に下記が必要
<!doctype html>

実際にやってみよう

ここでは、メニューを切り替えるサンプルを使って、レガシーブラウザ（IE8）含む動的ページを作るサンプルを書いてみます。

例えば、下記の言語リストを表示するHTMLをトグル表示させようとするならば、次に説明する方法をとります。
（あくまで自前で動的にできるよってのを見せるためのサンプルです）

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Simply Interactive Html Page.</title>
</head>
<body>

  <h3>Languages List</h3>
  <div>
    <div>
      <ul>
        <li>Ruby</li>
        <li>Java</li>
        <li>Python</li>
        <li>Perl</li>
        <li>PHP</li>
      </ul>
    </div>
  </div>

</body>

</html>

メニューをトグル表示させる

やることは、言語リスト（PHPが一番下なのは...）を表示したリストを
疑似ボタンをユーザがクリックしたときに、表示切り替えるというものです。
（今回、疑似ボタンを使ったのは、私的理由でng-modelディレクティブを使わない方法を試したかったからです）

利用するディレクティブリスト

今回、トグル表示させるために、下記のngモジュールを利用します。

ng-init
- 状態を初期化するため
ng-hide, ng-show
- ペインの表示切替するため
ng-click
- ユーザのクリックイベントを取得するため

リストの表示切替を可能にしたHTMLコード

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Simply Interactive Html Page.</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <style type="text/css">
.button {
  background-color: #eee;
  border: 1px solid #aaa;
  padding: 2px 4px;
  font-weight: bold;
}
  </style>
</head>
<body id="ng-app" ng-app>

  <h3>Languages List</h3>
  <div ng-init="menu.isShow=0;langs = ['Ruby', 'Java', 'Python', 'Perl', 'PHP'];">

    <div ng-hide="menu.isShow">
      <span ng-click="menu.isShow=1" class="button">Show Menu!</span>
      <div>menu.isShow: <span ng-bind="menu.isShow"></span></div>
    </div>
    <div ng-show="menu.isShow">
      <span ng-click="menu.isShow=0" class="button">Hide Menu!</span>
      <div>menu.isShow: <span ng-bind="menu.isShow"></span></div>
      <div> search : <input type="text" ng-model="keyword"></div>
      <ul>
        <li ng-repeat="lang in langs | filter:keyword">{{lang}}</li>
      </ul>
    </div>
  </div>

</body>

</html>

※補足：使っている変数の中身を覗くためにちょっと余計な出力が含まれています。

ちょっとだけ解説

同じことを実現するにあたっては、ng-switchディレクティブとかng-classディレクティブとか別のものを使えますが、個人的に組んだところ一番HTMLの記述が小さくなった理由から選んだ記述方法になります。

初期表示は、menuを表示させないので、isShow属性は0を入れています。

  <div ng-init="menu.isShow=0">
   ...
  </div>

最初に表示させたい方にng-hideを使い、もう一方にng-showを利用しています。

  <div ng-show="menu.isHide">
   ... 最初に表示させたい方
  </div>
  <div ng-hide="menu.isShow">
   ... 最初に表示させたくない方
  </div>

ユーザがクリックするアクションを利用してmenu変数のisShow属性値を切り替えています。

 <div ng-click="menu.isShow=1">

まとめ

実際のプロダクトを製造する場合にも、場所を限定して利用することができる仕組みはたくさんあります。
必ずControllerを書かなければならないわけでもなく、AngularJSは使いたい人の目的に応じた柔軟な使い方を提供してくれる仕組みであるといえるのではないでしょうか。

参考ページ

ディレクティブの種類はこちらを参照
（ただし、IE8の人はこちら）。

その他

(UI変わりましたねー。前よりプレビュー見やすくなって個人的にはいい感じです）