AngularJS-最初のアプリケーション

実際のHelloWorldを作成する前に！AngularJSを使用するアプリケーションでは、AngularJSアプリケーションの一部を見てみましょう。AngularJSアプリケーションは、次の3つの重要な部分で構成されています-

ng-app −このディレクティブは、AngularJSアプリケーションを定義してHTMLにリンクします。
ng-model −このディレクティブは、AngularJSアプリケーションデータの値をHTML入力コントロールにバインドします。
ng-bind −このディレクティブは、AngularJSアプリケーションデータをHTMLタグにバインドします。

AngularJSアプリケーションの作成

ステップ1：フレームワークをロードする

純粋なJavaScriptフレームワークであるため、<Script>タグを使用して追加できます。

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

ステップ2：ng-appディレクティブを使用してAngularJSアプリケーションを定義する

<div ng-app = "">
   ...
</div>

ステップ3：ng-modelディレクティブを使用してモデル名を定義する

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

ステップ4：ng-bindディレクティブを使用して定義された上記のモデルの値をバインドします

<p>Hello <span ng-bind = "name"></span>!</p>

AngularJSアプリケーションの実行

HTMLページで上記の3つのステップを使用します。

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

出力

ファイルtestAngularJS.htmをWebブラウザで開きます。名前を入力して結果を確認してください。

AngularJSとHTMLの統合方法

ng-appディレクティブは、AngularJSアプリケーションの開始を示します。
ng-modelディレクティブは、nameという名前のモデル変数を作成します。この変数は、HTMLページで使用でき、ng-appディレクティブを持つdiv内で使用できます。
ng-bindは、ユーザーがテキストボックスに入力を入力するたびに、名前モデルを使用してHTMLの<span>タグに表示されます。
Closing </ div>タグは、AngularJSアプリケーションの終了を示します。