AngularJS 入門チュートリアル (ゼロ): Bootstrap_AngularJS-jsチュートリアル-php.cn

これで、AngularJS アプリケーション、phonecat を作成する準備が整いました。このステップ (ステップ 0) では、重要なソースコードファイルに慣れ、AngularJS シードプロジェクトを含む開発環境を開始し、ブラウザでアプリケーションを実行する方法を学びます。

angular-phonecat ディレクトリに入り、次のコマンドを実行します:

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

git checkout -f step-0

このコマンドは、phonecat プロジェクトの作業ディレクトリをリセットします。学習ステップごとにこのコマンドを実行し、コマンド内の番号を学習ステップに対応する番号に変更することをお勧めします。作業ディレクトリに変更が加えられます。

次のコマンドを実行します:

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

ノードスクリプト/web-server.js

を使用してサーバーを起動します。起動後、http://localhost:8000 で実行されている Http Server を要求するメッセージが表示されます。ターミナルを閉じるとサーバーがシャットダウンされます。ブラウザに http://localhost:8000/app/index.html と入力して、phonecat アプリケーションにアクセスします。

これで、ブラウザーで最初のアプリケーションが表示されたはずです。これは非常に単純ですが、プロジェクトを実行する準備ができていることを示しています。

アプリケーションに表示される「ここにはまだ何もありません!」は、次の HTML コードから構成されています。このコードには、学ぶ必要がある AngularJS の主要な要素が含まれています。

app/index.html

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

<頭>

私の HTML ファイル
<リンク rel="スタイルシート" href="css/app.css">

<スクリプト src="lib/angular/angular.js">

ここには何もありません {{'まだ' '!'}}

コードは何をしているのでしょうか?

ng-app ディレクティブ:

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

ng-app ディレクティブは、AngularJS スクリプトのスコープをマークします。に ng-app 属性を追加すると、

ng-app ディレクティブが AngularJS スクリプトのスコープになることを意味します。開発者は、

などの ng-app ディレクティブをローカルで使用することもでき、AngularJS スクリプトはその

内でのみ実行されます。

AngularJS スクリプトタグ:

コードをコピーします

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

<スクリプト src="lib/angular/angular.js">

このコード行は angular.js スクリプトを読み込みます。ブラウザは HTML ページ全体の読み込みを完了すると、angular.js スクリプトを実行し、次の内容を含む HTML タグを探します。 ng-app ディレクティブ、このタグは AngularJS アプリケーションのスコープを定義します。

二重中括弧で囲まれた式:

コードをコピーします

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

ここには何もありません {{'まだ' '!'}}

このコード行は、AngularJS テンプレートのコア機能であるバインディングを示しています。このバインディングは、二重中括弧 {{}} と式「yet」「!」で構成されています。

このバインディングは、式を評価して結果を DOM に挿入する必要があることを AngularJS に伝えます。次のステップでは、式の操作結果が変化するにつれて DOM がリアルタイムで更新されることがわかります。

AngularJS 式 AngularJS 式は、JavaScript に似たコードスニペットであり、DOM 全体では実行されず、AngularJS のスコープ内でのみ実行されます。

AngularJS アプリケーションをブートストラップします

ngApp ディレクティブを使用して AngularJS アプリケーションを自動的に起動するのは簡潔な方法であり、ほとんどの状況に適しています。スクリプトを使用してアプリケーションをロードするなど、高度な開発では、ブートストラップを使用して AngularJS アプリケーションを手動でブートストラップすることもできます。

AngularJS アプリケーションのブートストラッププロセスには 3 つの重要なポイントがあります:

1. インジェクターは、このアプリケーションの依存関係注入を作成するために使用されます。 2. インジェクターは、アプリケーションモデルのスコープとしてルートスコープを作成します。 3. AngularJS は、ngApp でマークされた HTML タグから開始してルートスコープの DOM にリンクし、DOM 内の命令とバインディングを段階的に処理します。

AngularJS アプリケーションが起動されると、マウスクリックイベント、キーイベント、HTTP 受信応答、DOM モデルを変更するその他のイベントなど、ブラウザーの HTML によってトリガーされるイベントをリッスンし続けます。このようなイベントが発生すると、AngularJS は自動的に変更を検出し、それに応じて処理および更新します。

上記のアプリケーションの構造は非常にシンプルです。テンプレートパッケージにはディレクティブと静的バインディングが 1 つだけ含まれており、モデルも空です。次に、もう少し複雑なアプリケーションを試してみましょう。

作業ディレクトリにあるこれらのファイルは何のためにあるのでしょうか?

上記のアプリケーションは AngularJS シードプロジェクトから来ており、通常は AngularJS シードプロジェクトを使用して新しいプロジェクトを作成できます。シードプロジェクトには、最新の AngularJS コードベース、テストライブラリ、スクリプト、および典型的な Web アプリケーションの開発に必要な基本構成を含む簡単なアプリケーションサンプルが含まれています。

このチュートリアルでは、AngularJS シードプロジェクトに次の変更を加えました:

1. サンプルアプリケーションを削除します。

2. 携帯電話の画像を app/img/phones/ に追加します。 3. 携帯電話データファイル (JSON) を app/phones/ に追加します。 4. Twitter Bootstrap ファイルを app/css/ および app/img/ に追加します。

練習

算術演算に関する新しい式を Index.html に追加してみてください:

コードをコピー

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

1 2 = {{ 1 2 }}

概要

次に、ステップ 1 に進み、Web アプリケーションにコンテンツを追加しましょう。