AngularJS 入門チュートリアル Hello World!_AngularJS

ブラウザで上記のコードを実行して効果を確認してください。

この例については、いくつか注意すべき重要な点があります:

1. テキスト入力コマンド は、yourname というモデル変数にバインドされます。
2. 二重中括弧タグは、yourname モデル変数を挨拶文に追加します。
3. このアプリケーションに追加のイベント リスナーを登録したり、イベント ハンドラーを追加したりする必要はありません。

入力ボックスに名前を入力してみてください。入力した名前はすぐに更新され、挨拶文に表示されます。 これは、AngularJS における双方向データ バインディングの概念です。 入力ボックスへの変更はすべてモデル変数 (一方向) に即座に反映され、モデル変数への変更はすぐに挨拶テキスト (もう一方の方向) に反映されます。

AngularJS アプリケーションの分析

このセクションでは、AngularJS アプリケーションの 3 つのコンポーネントについて説明し、それらが Model-View-Controller デザイン パターンにどのようにマッピングされるかを説明します。

テンプレート

テンプレートは、アプリケーションのビューを表す HTML および CSS で作成するファイルです。 新しい要素と属性タグを、AngularJS コンパイラーへの命令として HTML に追加できます。 AngularJS コンパイラーは完全に拡張可能です。つまり、AngularJS を使用すると、HTML で独自の HTML マークアップを構築できます。

アプリケーションロジック (Logic) と動作 (Behavior)

アプリケーションのロジックと動作は、JavaScript で定義するコントローラーです。 AngularJS は、AngularJS にすでに組み込まれているため、追加のリスナーや DOM コントローラーを作成する必要がないという点で、標準の AJAX アプリケーションとは異なります。これらの機能により、アプリケーション ロジックの作成、テスト、保守、理解が容易になります。

モデルデータ(Data)

モデルは、AngularJS スコープ オブジェクトのプロパティから派生します。モデル内のデータは、JavaScript オブジェクト、配列、またはプリミティブ型であっても構いません。重要なのは、それらがすべて AngularJS スコープ オブジェクトに属しているということです。

AngularJS はスコープを使用して、データ モデルとビュー インターフェイス UI の間の双方向の同期を維持します。モデルの状態が変化すると、AngularJS はビュー インターフェイスを即座に更新し、その逆も同様です。

さらに、AngularJS はいくつかの非常に便利なサービス機能も提供します。

1. 基礎となるサービスには、依存関係注入、XHR、キャッシュ、URL ルーティング、ブラウザー抽象化サービスが含まれます。
2. 独自の特定のアプリケーション サービスを拡張および追加することもできます。
3. これらのサービスを使用すると、非常に便利に WEB アプリケーションを作成できます。