JavaScript強化教程——AngularJS 指令

本文爲 H5EDU 機構官方 HTML5培訓

AngularJS 經過被稱爲 指令 的新屬性來擴展 HTML。
AngularJS 經過內置的指令來爲應用添加功能。
AngularJS 容許你自定義指令。
AngularJS 指令
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。
完整的指令內容能夠參閱 AngularJS 參考手冊。
AngularJS 實例
<div ng-app="" ng-init="firstName='John'">

 	<p>在輸入框中嘗試輸入：</p>
 	<p>姓名：<input type="text" ng-model="firstName"></p>
 	<p>你輸入的爲： {{ firstName }}</p>

</div>

 教程，主要介紹：JavaScript強化教程 —— AngularJS 指令

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"全部者"。
Note	一個網頁能夠包含多個運行在不一樣元素中的 AngularJS 應用程序。
數據綁定
上面實例中的 {{ firstName }} 表達式是一個 AngularJS 數據綁定表達式。
AngularJS 中的數據綁定，同步了 AngularJS 表達式與 AngularJS 數據。
{{ firstName }} 是經過 ng-model="firstName" 進行同步。
在下一個實例中，兩個文本域是經過兩個 ng-model 指令同步的：
AngularJS 實例
<div ng-app="" ng-init="quantity=1;price=5">

<h2>價格計算器</h2>

數量： <input type="number"	ng-model="quantity">
價格： <input type="number" ng-model="price">

<p><b>總價：</b> {{ quantity * price }}</p>

</div>

點擊進入JavaScript強化教程