簡単なサンプルコードでAngularJSスクリプトの基本要素確認

wp-admin

10年前

簡単なサンプルコードを使ってAngularJSの基本要素を確認します。

※目次をクリックすると目次の下部にコンテンツが表示されます。

１．サンプルコード
２．AngularJSを使用するには？
３．サンプルコードの補足説明

サンプルコード

<!doctype html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>AngularJSサンプル</title>
    <script src="js/angular.min.js"></script>
    <script>
      var myApp = angular.module("myApp", []);
    </script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1>AngularJSの簡単なサンプルコード</h1>
      </div>
      <label>名前:</label>
      <input type="text" ng-model="yourName" placeholder="ここに名前を入力">
      <hr>
      <h1>ようこそ {{yourName}}さん!</h1>
    </div>
  </body>
</html>

AngularJSを使用するには？

①HTMLファイルで<script>要素でangular.jsファイルをインクルード
　
<script type=”text/javascript” src=”js/angular.min.js”></script>
　
②AngularJSのモジュールを作成
　
angular.moduleメソッドでモジュールを作成できます。１番目の引数がモジュール名、２番目の引数でこのモジュールが使用する他のモジュール名を配列でしています。
　
ここでは、”myApp”という名前のモジュールを作成しています。このサンプルでは、モジュールを定義しただけで中身は空です。
　
<script>
　var myApp = angular.module(“myApp”, []);
</script>
　
③HTMLにモジュールを適用
　
“ng-app”属性を使ってAngularJSのモジュールをHTMLに適用します。
　
このサンプルでは、HTMLファイル全体にモジュールを適用するため、html要素にng-app属性を指定しています。jQueryなど他の技術を併用する場合には、ドキュメント内の限定した領域にモジュールを適用します。
　
<html ng-app=”myApp”>
　
このサンプルでは、定義したモジュールには何も記述していませんが、AngularJSをHTMLに適用したのでAngularJSのビルトインの機能が利用できます。

サンプルコードの補足説明

①<html ng-app>
　
・このディレクティブは、AngularJSがアプリのルートとしてみなすHTML要素のフラグとしての役割があります。
　
・この仕組みによって開発者はページ全体をAngularJSアプリの対象とするかページの一部を対象とするか指定出来ます。
　
②<script src=”js/angular.min.js”>
　
・angular.min.jsスクリプトをダウンロードし、HTMLページが完全にダウンロードされるときにブラウザによって実行されるコールバックを登録。
　
・コールバックが実行されるとAngularはngAppディレクティブを探してアプリを起動。
　
③{{yourName}}　１wayデータバインディング
　
・AngularJSのビルトインの機能で、二重カーリーブラケット（波括弧、中括弧）を記述するとデータモデルとバインディングが行われ、データモデルからHTMLにデータが挿入されます。
　
・バインディングによってAngularは式（expression）を評価して、その結果をDOMで挿入します。
　
・バインディングでは、一度きりの挿入ではなく、expressionの評価結果が変わるたびに継続的に挿入します。
　
④<input type=”text” ng-model=”yourName”>　２way（双方向）データバインディング
　
・”ng-model”を指定すると２wayのデータバインディングとなります。
HTMLのinput要素で入力した値はデータモデルに反映され、関連する１wayバインディングにも即座に反映され、同期されます。
　
・サンプルコードでは、同じ名前で１ｗａｙデータバインディングが設定されているので、input要素に値を入力すると即座にその下に入力した値が表示されます。