この章では、Webアプリケーション開発で使用するようにAngularJSライブラリをセットアップする方法について説明します。また、ディレクトリ構造とその内容を簡単に調べます。
リンクhttps://angularjs.org/を開くと、Angularjsライブラリをダウンロードする2つのオプションがあることがわかります。
Githubのダウンロード - このボタンをクリックしてGithubに移動し、最新のスクリプトをすべて取得します。
ダウンロード - またはこのボタンをクリックすると、次のように表示されます。
この画面は、次のようにアングルJSを使用するためのさまざまなオプションを提供します。
ダウンロードとローカルホストファイル
2つの異なるオプションがあります。古いものと最新です。名前自体は自明です。古いバージョンはすでに1.2.xバージョンよりも低く、最新バージョンは1.3.xバージョンです。
また、Minified、非圧縮、または圧縮バージョンを使用することもできます。
CDNアクセス：CDNを使用することもできます。 CDNは、世界にアクセスできます。この場合、Googleは地域のデータセンターをホストしています。これは、独自のサーバーからさまざまな外部要因へのファイルに対するモバイルホストの責任にCDNを使用することを意味します。これにより、訪問者が同じCDNからAngularJのコピーをダウンロードした場合、再ダウンロードする必要がないという利点も提供されます。
このチュートリアルでCDNバージョンライブラリを使用してください。
例
次に、AngularJSライブラリを使用して簡単な例を書きましょう。次のように、HTMLファイルmyFirstexample.htmlを作成します。
<！Doctype html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> </script> </head> <h2>歓迎{{helloto.title}} yiibai！</h2> </div> <script> angular.module（ "myapp"、[]）.controller（ "hellocontroller"、function（$ scope）{$ scope.helloto = {}; $ scope.helloto " </script> </body> </html>次の章では、上記のコードについて詳しく説明します。
Angularjsを含む
AngularJSのJavaScriptファイルにHTMLページを既に含めるため、AngularJSを使用できます。
<head> <スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </head>
Angularjsの最新バージョンを公式Webサイトでご覧ください。
AngularJSアプリケーションを指します
次に、HTMLの一部にAngularJSアプリケーションが含まれていることを教えてください。これは、NG-APP属性をAngularJSアプリケーションのルートにあるHTML要素に配置することで実行できます。次のように、HTML要素またはボディ要素に追加できます。
<body ng-app = "myApp"> </body>
ビュー
ビューのこの部分：
<div ng-controller = "hellocontroller"> <h2> welcome {{helloto.title}} yiibai！</h2> </div>Ng-Controllerは、Angularjsにコントローラーとビューとは何かを伝えます。 Helloto.titleは、Angularjsに、この位置でHELLOTO.TITLEと呼ばれるHTMLの「モデル」の値を書くように指示します。
コントローラ
コントローラーの部分は次のとおりです。
<script> angular.module（ "myApp"、[]）.controller（ "Hellocontroller"、function（$ scope）{$ scope.helloto = {}; $ scope.helloto.title = "angularjs";}）; </scrip>このコードは、最初にHelloControllerのMyApp Angleモジュールコントローラーという名前の関数を登録します。モジュールとコントローラーの詳細については、それぞれの章で詳しく説明します。コントローラー関数は、Angular.module（...）を介して角度で登録されます。コントローラー（...）関数呼び出し。
コントローラー関数に渡された$スコープパラメーターモデル。コントローラー関数は、HellotoのJavaScriptオブジェクトを追加します。これには、タイトルフィールドが追加されています。
埋め込む
myfirstexample.htmlllとして上記のコードを保存します。ブラウザで開きます。次の出力が表示されます。
ページがブラウザにロードされると、次のイベントが発生します。
HTMLドキュメントはブラウザにロードされ、ブラウザによって計算されます。 AngularJS JavaScriptファイルがロードされ、角度グローバルオブジェクトが作成されます。次に、JavaScriptの登録コントローラー機能が実行されます。
AngularJSはHTMLを介してスキャンして、AngularJSアプリケーションとビューを見つけます。ビューが見つかったら、対応するコントローラー関数にビューを接続します。
次に、AngularJSは制御関数を実行します。次に、人口型コントローラーモデルでデータビューをレンダリングします。これでページの準備が整いました。