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

AngularJS の学習を始めるのに最適な方法は、クラシック アプリケーション「Hello World!」を作成することです。

1. お気に入りのテキスト エディタを使用して、HTML ファイル (例: helloworld.html) を作成します。
2. 以下のソース コードを HTML ファイルにコピーします。
3. この HTML ファイルを Web ブラウザで開きます。

ソースコード:

コードをコピー コードは次のとおりです:

<頭>



こんにちは、{{'World'}}!

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

次に、コードを詳しく見て、何が起こっているのかを見てみましょう。 ページが読み込まれると、ng-app タグは AngularJS に HTML ページ全体を処理し、アプリケーションをブートストラップするように指示します。

コードをコピーします コードは次のとおりです:

この行は AngularJS スクリプトを読み込みます:

コードをコピーします コードは次のとおりです:

<スクリプト src="http://code.angularjs.org/angular-1.0.1.min.js">

(AngularJS が HTML ページ全体を処理する方法の詳細については、「ブートストラップ」を参照してください。)

最後に、タグ内の本文テキストは、UI で挨拶を表示するために適用されるテンプレートです。

コードをコピーします コードは次のとおりです:

こんにちは、{{'World'}}!

二重中括弧 {{}} でマークされた内容は、挨拶にバインドされた式であることに注意してください。この式は単純な文字列「World」です。

次に、より興味深い例を見てみましょう。AngularJS を使用して動的表現を挨拶テキストにバインドします。

AngularJS の世界へようこそ!

この例は、AngularJS での双方向データ バインディングを示しています。

1. 前に作成した helloworld.html ドキュメントを編集します。

2. 以下のソース コードを HTML ファイルにコピーします。
3. ブラウザウィンドウを更新します。

ソースコード:

コードをコピー コードは次のとおりです:

<頭>



あなたの名前:
                                                                                        こんにちは、{{あなたの名前 || '世界'}}!

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

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

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 アプリケーションを作成できます。