AngularJS-環境のセットアップ

この章では、Webアプリケーション開発で使用されるAngularJSライブラリの設定方法について説明します。また、ディレクトリ構造とその内容についても簡単に説明します。

リンクhttps://angularjs.org/を開くと、AngularJSライブラリをダウンロードするための2つのオプションが表示されます-

AngularJSダウンロード

* GitHubで表示*-このボタンをクリックすると、GitHubに転送され、最新のスクリプトがすべて表示されます。
* AngularJS 1をダウンロード*-このボタンをクリックすると、画面にダイアログボックスが表示されます-

AngularJSダウンロード

この画面は、次のようにAngular JSを使用するさまざまなオプションを提供します-

ローカルでのファイルのダウンロードとホスティング
レガシーと最新の2つの異なるオプションがあります。名前自体は自己記述的です。 Legacyのバージョンは1.2.x未満で、Latestのバージョンは1.3.xです。
最小化、非圧縮、または圧縮されたバージョンを使用することもできます。
* CDNアクセス*-CDNにもアクセスできます。 CDNを使用すると、地域のデータセンターにアクセスできます。この場合、Googleホスト。 CDNは、ファイルをホストする責任を自分のサーバーから一連の外部サーバーに移します。また、Webページの訪問者が同じCDNからAngularJSのコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点もあります。

'_このチュートリアルでは、ライブラリのCDNバージョンを使用しています。_

例

次に、AngularJSライブラリを使用して簡単な例を作成します。次のようなHTMLファイル_myfirstexamplel_を作成してみましょう-

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>

   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of finddevguides!</h2>
      </div>

      <script>
         angular.module("myapp", [])

         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>

   </body>
</html>

上記のコードを詳しく見てみましょう-

AngularJSを含める

AngularJS JavaScriptファイルをHTMLページに含めて、使用できるようにします-

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

AngularJSの最新バージョンは、公式Webサイトで確認できます。

AngularJSアプリを指す

次に、HTMLのどの部分にAngularJSアプリが含まれているかを伝える必要があります。これを行うには、AngularJSアプリのルートHTML要素にng-app属性を追加します。以下に示すように、html要素またはbody要素に追加できます-

<body ng-app = "myapp">
</body>

View

ビューはこの部分です-

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of finddevguides!</h2>
</div>

_ng-controller_は、このビューで使用するコントローラーをAngularJSに伝えます。 _helloTo.title_は、HelloTo.titleという名前のモデル値をこの場所のHTMLに書き込むようAngularJSに指示します。

コントローラ

コントローラ部分は-

<script>
   angular.module("myapp", [])

   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

このコードは、_myapp_という名前の角度モジュールにHelloControllerという名前のコントローラー関数を登録します。 link：/angularjs/angularjs_modules [modules]およびlink：/angularjs/angularjs_controllers [controllers]の詳細については、それぞれの章で説明します。コントローラー関数は、angular.module（…）。controller（…）関数呼び出しを介して、angularに登録されます。

$ scopeパラメーターモデルはコントローラー関数に渡されます。コントローラー関数は_helloTo_ JavaScriptオブジェクトを追加し、そのオブジェクトに_title_フィールドを追加します。

実行

上記のコードを_myfirstexamplel_として保存し、任意のブラウザーで開きます。あなたは次の出力を見ることができます-

Welcome AngularJS to the world of finddevguides!

ページがブラウザにロードされるとどうなりますか？見てみましょう−

HTMLドキュメントがブラウザにロードされ、ブラウザによって評価されます。
AngularJS JavaScriptファイルがロードされ、アンギュラー_global_オブジェクトが作成されます。
コントローラ機能を登録するJavaScriptが実行されます。
次に、AngularJSはHTMLをスキャンして、AngularJSアプリとビューを検索します。
ビューが見つかると、そのビューを対応するコントローラー機能に接続します。
次に、AngularJSがコントローラー機能を実行します。
次に、コントローラーによって作成されたモデルのデータを使用してビューをレンダリングします。これでページの準備ができました。

Angularjs-environment

目次

AngularJS-環境のセットアップ

例

AngularJSを含める

AngularJSアプリを指す

View

コントローラ

実行