AngularJS 入門チュートリアル (ゼロ): Bootstrap_AngularJS

これで、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

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

<頭>


<リンク 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 アプリケーションにコンテンツを追加しましょう。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：AngularJS 入門チュートリアル (1): 静的テンプレート_AngularJS次の記事：AngularJS 入門チュートリアル (1): 静的テンプレート_AngularJS

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル