Googleが開発したオープンソースのフレームワークで、ウェブアプリケーションの考え方を変えるエキサイティングなものです。AngularJSについては多くのことが書かれていますが、手っ取り早く、実際の例を好む開発者のためにAngularJSについて書くことは有益です。今日のウェブプログラミングのアプローチは変わりました。以下に、モデル、ビュー、コントローラ、サービス、フィルタなど、Angularアプリケーションの基本的な構成要素を5つの例で説明します。お気に入りのコードエディタで開きたい場合は、zipパッケージをダウンロードしてください。
AngularJSとは何ですか？
ハイレベルな理解の上に、AngularJSはHTML（ビュー）をJavaScriptオブジェクトにバインドするフレームワークです。モデルが変更されると、ページも自動的に更新されます。ドメインのコンテンツが変更されると、それに関連付けられたモデルも更新されます。Angularがすべての中間コードを処理するので、jQueryのように手動でHTMLを更新したり、イベントをリッスンしたりする必要はありません。実際、ここでのどの例もjQueryを使っていません！
AnguarJSを使用するには、ページ内の<body>タグの最後にインクルードする必要があります。ここではGoogle CDNを推奨します：
<script
src="https://..com/ajax/libs/angularjs/..7/..js"><
/script>
AngularJSでは、多数のディレクティブによってモデルとHTML要素の関連付けを行うことができます。これらはng-で始まる属性で、どの要素にも追加することができます。Angularを使用したい場合、各ページで最も重要な属性の1つであるng-appを含める必要があります。
<body ng-app>
この要素は、body や周辺の div 要素など、ページの残りの部分を含むことができる要素に追加する必要があります。ページがロードされると、Angular はこの属性を探し、子要素で見られるすべてのディレクティブを自動的に評価します。
理論の部分はここまで！では、コードを見てみましょう。
1.ナビゲーションメニュー
最初の例として、選択されたアイテムをハイライトするナビゲーションメニューを作ってみましょう。この例ではAngularディレクティブのみを使用しており、おそらくこのフレームワークを使用する最も簡単なアプリケーションです。ソースコードを見るには、編集ボタンをクリックしてください。いよいよ実験の準備です！
上のコードからわかるように、Angularディレクティブはactive変数の設定と読み込みに使われています。この変数が変更されると、それを使用するHTMLが自動的に更新されます。Angularの用語では、このような変数はモデルと呼ばれます。これは現在のドメイン内のすべてのディレクティブで利用可能で、コントローラでも利用可能です。
JavaScriptのテンプレートを使ったことがあるなら、{{var}}構文に慣れているはずです。フレームワークがこのような文字列を見ると、変数の内容に置き換えます。変数が変更されると、この操作は一度だけ繰り返されます。
2.インラインエディター
段落がクリックされるとテキストヒントボックスが表示されます。コントローラを使用し、モデルを初期化し、プロンプトの可視性を切り替える2つの関数を宣言します。コントローラは通常のJavaScript関数で、Angularによって自動的に実行されます。使用時には、関連するページを関連付けるために ng-controller ディレクティブが使用されます。
コントローラの関数が実行されると、引数のひとつとして特別な $scope オブジェクトを受け取ります。このオブジェクトにプロパティや関数を追加すると、ビューでも利用できます。テキストフィールドで ng-model バインディングを使用して、フィールドの値が変更されたときにコンテンツを更新するように Angular に指示します。
3.注文書
この例では、Angularのもう一つの便利な機能であるフィルタを使用して、リアルタイムで合計金額を更新する注文フォームを書いています。フィルターはパイプ文字「｜」を通してカスケードすることができ、モデルを変更することができます。下の例では、通貨フィルタを使用して、ドル記号とセントを含む適切な形式の価格に変換しています。すぐに4番目の例で見るように、独自のフィルタを簡単に作成することもできます。
ng-repeatバインディングは配列要素を繰り返し処理し、対応するトークンを生成できるフレームワークのもう1つの便利な機能です。エントリが変更もしくは削除されたときにインテリジェントに更新できます。
注：より完全なバージョンを入手するには、Backbone.jsで実装されたこのバージョンに基づくチュートリアルをご覧ください。
#p#
4.インスタント検索
この例では、ユーザーがテキストフィールドに入力することで、エントリーのセットをフィルタリングできます。これもAngularが得意とするところで、カスタムフィルタを書くのに最適な場所です。これを行うので、まずアプリケーションをモジュールに変換する必要がありました。
モジュールは、JavaScriptアプリケーションを斬新で興味深い方法で結合された別々のコンポーネントに編成する方法です。Angularはこの手法によってコードの分離を実現し、フィルタを作成する際にはこのアプローチに従う必要があります。アプリケーションをモジュール化する際に必要なことは2つだけです：
1.JSでangular.module("name",[])関数を呼び出します。これは新しいモジュールを初期化して返します；
2.モジュール名をng-appディレクティブの値で渡します。
フィルタを作成するには、angular.module("name",[])が返すモジュールオブジェクトに対してfilter()メソッドを呼び出すだけです。
フィルターもAngular.jsの哲学に従います - 書くコードのすべての部分が独立していて、テスト可能で、再利用可能であるべきです。このフィルタはすべてのビューで使用でき、カスケードを通して他のコンポーネントに接続することもできます。
5.グリッドの切り替え
もう1つのよく使われるインタラクションUIは、ボタンをクリックして異なるレイアウトモードを切り替えることです。これはAngularでとても簡単にできます。さらに、もう1つの重要な概念であるサービスを紹介します。サービスとは、アプリケーションがAPIやその他のデータソースなどのサーバーとやり取りするために使用できるオブジェクトです。この例では、Instagram APIとやりとりし、それを使用して最も人気のあるイメージを配列で返すサービスを記述します。
このコードを実行するには、ページにAngular.jsを追加してください：
<script
src="http://..com/ajax/libs/angularjs/..7/angular-..js"><
/script>
これには、AJAXAPIと非常に簡単に動作するngResourceモジュールが含まれています。これは下のエディタに自動的に含まれています。
サービスは完全に独立しているので、他のコードに影響を与えることなく異なる実装を書くことができます。たとえば、テストの際には、ハードコーディングされたイメージの配列を返すようにすると、テストがはかどるでしょう。
