簡単なサンプルコードで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メソッドでモジュールを作成できます。1番目の引数がモジュール名、2番目の引数でこのモジュールが使用する他のモジュール名を配列でしています。
 
ここでは、”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}} 1wayデータバインディング
 
・AngularJSのビルトインの機能で、二重カーリーブラケット(波括弧、中括弧)を記述するとデータモデルとバインディングが行われ、データモデルからHTMLにデータが挿入されます。
 
・バインディングによってAngularは式(expression)を評価して、その結果をDOMで挿入します。
 
・バインディングでは、一度きりの挿入ではなく、expressionの評価結果が変わるたびに継続的に挿入します。
 
④<input type=”text” ng-model=”yourName”> 2way(双方向)データバインディング
 
・”ng-model”を指定すると2wayのデータバインディングとなります。
HTMLのinput要素で入力した値はデータモデルに反映され、関連する1wayバインディングにも即座に反映され、同期されます。
 
・サンプルコードでは、同じ名前で1wayデータバインディングが設定されているので、input要素に値を入力すると即座にその下に入力した値が表示されます。

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です