ホームページ >ウェブフロントエンド >jsチュートリアル >初めての AngularJS アプリケーションを作成する方法_AngularJS
初めての AngularJS アプリケーションを作成する方法_AngularJS
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 15:54:441155ブラウズ
以下の手順に従って、AngularJS アプリケーションを作成します
ステップ 1: フレームをロードする
純粋な JavaScript フレームワークとして、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用して追加できます。
<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>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
<html> <title>AngularJS First Application</title> <body> <h1>Sample Application</h1> <div ng-app=""> <p>我的名字: <input type="text" ng-model="name"></p> <p>Hello, <span ng-bind="name"></span>!</p> </div> <script 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 ページに「name」という名前のモデル変数を作成し、ng-app ディレクティブは div 内で使用されます。
- ng-bind は、ユーザーがテキスト ボックスに何かを入力するたびに、モデル名を使用して HTML の spam タグに表示します。
- 終了タグ 16b28748ea4df4d9c2150843fecfba68 は、AngularJS アプリケーションの終了を示します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。