以下の手順に従って、AngularJSアプリケーションを作成します
ステップ1:フレームのロード
純粋なJavaScriptフレームワークとして、<script>タグを使用して追加できます。
<スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script>
ステップ2:NG-APP指令を使用して、AngularJSアプリケーションを定義します
<div ng-app = ""> ... </div>
ステップ3:ng-modelディレクティブで定義されたパターン名
<p>名前を入力してください:<入力タイプ= "text" ng-model = "name"> </p>
ステップ4:ng-bindディレクティブを使用して、上記のモデルの値定義をバインドします
<p> hello <span ng-bind = "name"> </span>!</p>
以下の手順に従って、AngularJSアプリケーションを実行します
HTMLページで上記の3つのステップを使用します。
testangularjs.html
<html> <title> angularjs first application </title> <body> <h1> sampleアプリケーション</h1> <div ng-app = ""> <p>私の名前:<入力タイプ= "text" ng-model = "name"> </p> <p> hello、<span ng-bind = "name"> </span> src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>
出力
WebブラウザでTextangularjs.htmlを開きます。名前を入力して結果を確認してください。
AngularjsをHTMLと統合する方法
NG-APP指令は、AngularJSアプリケーションの開始を示します。
NG-Modelディレクティブは、HTMLページに「名前」という名前のモデル変数を作成し、Divで使用されるNG-APPディレクティブを持っています。
NG-Bindは、テキストボックス内の何かがHTMLスパンタグに表示される限り、モデル名を使用します。
End </div>タグは、AngularJSアプリケーションの終了を示します。
上記は、単純なAngularJSアプリケーションです。将来、関連情報を整理し続けます。このウェブサイトへのご支援ありがとうございます。