0-起動

3417 ワード
今、AngularJSのphonecatアプリケーションを構築するつもりです.このステップでは、ほとんどのソースコードと熟知し、angular-seedで開発サーバを起動し、ブラウザでプログラムを実行することを学びます.angular-phonecatディレクトリでコマンドを実行
git checkout -f step-0

これにより、作業区間をプログラムappの0ステップにリセットします.チュートリアルの各ステップを繰り返し、ステップ番号を徐々に変更する必要があります.これにより、作業ディレクトリで行った変更が失われます.まだ準備ができていない場合は、依存をインストールする必要があります.
npm install

ブラウザでアプリケーションの実行を見て、特定の端末またはコマンドラインウィンドウを開き、npm startを実行してwebサーバを起動し、今アプリケーションにブラウザウィンドウを開き、http://localhost:8000/app/ページが見えて、あまり興奮していませんが、まあまあです.次のHTMLコードを使用して、「Nothing here yet!のHTMLページでは、コードにAngularのキー要素がいくつか含まれており、処理します.
<!doctype html>
<html lang="en" ng-app>
<head>
 <meta charset="utf-8">
 <title>My HTML File</title>
 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
 <link rel="stylesheet" href="css/app.css">
 <script src="bower_components/angular/angular.js"></script>
</head>
<body>

 <p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

コードは何をしましたか?


ng-app指令
<html ng-app>

ng-appプロパティは、ngAppというAngularコマンドを表します(Angularは、クライアントに下線ネーミング法を使用し、アルパカネーミング法でコマンドを実装することを表します).このコマンドは、このhtml要素Angularが私たちのプログラムのルート要素と考えられることを識別するために使用され、プログラム開発者にhtmlページ全体または一部をAngularアプリケーションと見なすようにAngularに伝える自由を与えます.AngularJSスクリプトラベル
<script src="bower_components/angular/angular.js">

このコードはangularをダウンロードします.jsスクリプトは、HTMLが完全にダウンロードされるとブラウザによって実行されるコールバックを登録します.コールバックが実行されると、AngularはngAppコマンドを検索し、Angularがコマンドを見つけた場合、コマンド定義ngAPpが表すアプリケーションDOM要素からプログラムを起動します.かっこデータバインド式
Nothing here {{'yet' + '!'}}

この行はAngularモードの2つのコアポイントを示しています.
  • バインド、カッコで{}}
    • を表す
  • このバインドの簡単な式'yet' + '!'
    • バインディングはAngularに式を計算し、結果をバインディングの場所に置き換える必要があることを示します.1回のコミットに対して、式の計算にかかわらず、バインディングは効果的に継続的にコミットされます.Angular式はクラスJavaScriptのコードフラグメントであり、現在のモデル範囲環境で計算されるか、グローバル範囲内の環境で計算されます.期待通り、Angularがこのテンプレートを処理すると、ページには「Nothing here yet!」というテキストが含まれています.

    AngularJSアプリケーションの起動


    ほとんどの場合、ngAppコマンドでAngularアプリケーションを自動的に起動するのは簡単で快適です.さらに、スクリプト読み取りのようにimperative/manual wayでアプリケーションを起動することができます.アプリケーションが起動すると、これは3つ発生します.
  • は、注入に依存するレジストリを作成するために使用される.
  • レジストリはルート範囲を作成し、私たちのプログラムモデルのコンテキスト環境になります.
  • Angularは、ngAppから始まるDOMルート要素をコンパイルし、その過程で遭遇する各コマンドとデータバインディングを処理します.

    • アプリケーションが起動すると、ブラウザのイベント(マウスクリック、キーボード押下、HTTP応答など)がモデルを変更する可能性があります.イベントが発生すると、Angularはモデルの変更を引き起こすかどうかを検出し、変更が発見されると、Angularはバインドに影響してビューを更新して反応します.現在、私たちの応用機構はまだ簡単で、テンプレートには1つのコマンドと1つの静的バインドしか含まれていません.私たちのモデルは空で、すぐに変わります.

    これらのファイルは私の作業ディレクトリで何ですか?


    私たちの作業ディレクトリのほとんどのファイルはangular-seedプロジェクトから来ています.彼は典型的にAngularプロジェクトを起動するために使用されています.このシードプロジェクトは、app/bower_components/ディレクトリでbowerを介して事前に構成されたangularフレームワークであり、典型的なネットワークアプリケーションを開発するツール(npmを介して)です.このチュートリアルの目的で、angular-seedプロジェクトを以下のように変更しました.
  • 移動例アプリケーション
  • 電話画像(app/img/phones)
    • を追加
  • 電話データファイル(JSON)をapp/phones/
    • に追加
  • はbowerにあります.jsonファイルにBootstrap依存性が追加されました

    • しけん


    新しい式をindexに追加してみます.html、それは数学ができます.
    <p>1 + 2 = {{ 1 + 2 }}</p>

    まとめ


    次に、Webアプリケーションにコンテンツを追加します.原文住所:https://docs.angularjs.org/tutorial/step_00
    Macでのoracleのインストールと実行
    Design Principles