現在、Angularjsアプリケーション-Phonecatを作成する準備をしています。このステップ（ステップ0）では、重要なソースコードファイルに精通し、AngularJSシードプロジェクトを含む開発環境を開始することを学び、ブラウザ側でアプリケーションを実行します。
Angular-Phonecatディレクトリを入力し、次のコマンドを実行します。
gitチェックアウト-fステップ0
このコマンドは、Phonecatプロジェクトの作業ディレクトリをリセットします。各学習ステップでこのコマンドを実行し、コマンドの番号を学習ステップに対応する番号に変更することをお勧めします。コマンドは、作業ディレクトリで行った変更をクリアします。
次のコマンドを実行します。
ノードスクリプト/web-server.js
サーバーを起動するには、コマンドライン端子がhttp：// localhost：8000で実行されるHTTPサーバーをプロンプトします。端末を閉じないでください。ターミナルを閉じると、サーバーが閉じられます。 http：// localhost：8000/app/index.htmlをブラウザに入力して、Phonecatアプリケーションにアクセスします。
これで、ブラウザでは、最初のアプリケーションを見る必要がありますが、これは簡単ですが、プロジェクトが実行される準備ができていることを意味します。
「まだここには何も！」アプリケーションに表示されているのは、AngularJSの重要な要素を含む次のHTMLコードから構築されています。これは、まさに学習する必要があるものです。
app/index.html
<！doctype html> <html lang = "en" ng-app> <head> <meta charset = "utf-8"> <title>私のhtmlファイル</title> <link rel = "styleSheet" href = "css/app.css"> <link rel = "styleSheet src = "lib/angular/angular.js"> </script> </head> <body> <p>ここには何も{{{'まだ' + '！'！ '}} </p> </body> </html>コードは何をしていますか？
ng-app指令：
<html lang = "en" ng-app>
NG-APP指令は、AngularJSスクリプトの範囲をマークします。 <html>にng-app属性を追加すると、<html>全体がangularjsスクリプトの範囲であることを意味します。開発者は、<div ng-app>などのng-appディレクティブをローカルで使用することもでき、angularjsスクリプトはその<div>でのみ実行されます。
AngularJSスクリプトタグ：
<スクリプトsrc = "lib/angular/angular.js"> </script>
このコード行は、Angular.jsスクリプトにロードされます。ブラウザがHTMLページ全体をロードすると、Angular.jsスクリプトが実行されます。 Angular.jsスクリプトが実行された後、NG-APPディレクティブを含むHTMLタグを探します。このタグは、AngularJSアプリケーションの範囲を定義します。
二重ブレースバウンドエクスプレッション：
<p>ここには{{'まだ' + '！'}} </p>
このコード行は、二重ブレース{{{}}と式「まだ「 +」！」で構成されるAngularJSテンプレート - バインディングのコア関数を示しています。
この結合は、AngularJSに式を計算し、結果をDOMに挿入する必要があることを示しています。次のステップでは、式の操作結果が変化するにつれて、DOMをリアルタイムで更新できることがわかります。
AngularJS発現角度発現はJavaScriptのようなスニペットであり、AngularJS式はAngularJSの範囲でのみ実行され、DOM全体ではありません。
AngularJSアプリケーションを起動します
NGAPPディレクティブを介したAngularJSアプリケーションを自動的に起動することは、ほとんどの状況に合わせて簡潔な方法です。スクリプトを使用してアプリをロードするなどの高度な開発では、Bootstrapを使用してAngularJSアプリケーションを手動で起動することもできます。
AngularJSアプリケーションブートプロセスには3つの重要なポイントがあります。
1.インジェクターは、このアプリケーションの依存関係注入を作成するために使用します。
2.インジェクターは、アプリケーションモデルの範囲としてルートスコープを作成します。
3. AngularJSは、NGAPPでマークされたHTMLタグから始まり、DOMのディレクティブとバインディングを徐々に扱うルートスコープでDOMをリンクします。
AngularJSアプリケーションが起動すると、マウスクリックイベント、キープレスイベント、HTTP着信応答など、ブラウザのHTMLトリガーイベントを聞き続けます。これにより、DOMモデルが変更されます。そのようなイベントが発生すると、AngularJSは変更を自動的に検出し、対応する処理と更新を行います。
上記のアプリケーションの構造は非常に簡単です。テンプレートパッケージには、1つのディレクティブと1つの静的バインディングのみが含まれており、モデルも空です。次に、少し複雑なアプリケーションを試してみましょう！
私のワーキングディレクトリ内のこれらのファイルは何をしますか？
上記のアプリケーションは、AngularJS Seed Projectからのものです。通常、Angularjs Seed Projectを使用して新しいプロジェクトを作成できます。シードプロジェクトには、最新のAngularJSコードベース、テストライブラリ、スクリプト、および典型的なWebアプリケーションの開発に必要な基本的な構成を含む簡単なアプリケーションの例が含まれています。
このチュートリアルでは、AngularJSシードプロジェクトに次の変更を加えました。
サンプルアプリケーションを削除します。
練習する
index.htmlに数学操作に関する新しい式を追加してみてください。
<p> 1 + 2 = {{1 + 2}} </p>
要約します
次に、ステップ1にアクセスして、Webアプリケーションにコンテンツを追加しましょう。
上記は、AngularJSブートローダーを整理する情報です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！