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

AngularJSを使用して実際の_Hello World！_アプリケーションを作成する前に、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

<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_をWebブラウザーで開きます。名前を入力して結果を確認します。

AngularJSとHTMLの統合方法

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

Angularjs-first-application

目次