1. 引入angular.js
相應版本下載地址： https://code.angularjs.org/
2. 編寫html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS</title> <script src="js/angular.js"></script> </head> <body> <div> <!-- 引入ng-app標識，表示在作用域范圍內可以使用angularJS標簽，是有使用范圍的 --> <div ng-app> <!-- 綁定需要angularJS操作的對象 --> <input ng-model="gender" type="text" placeholder="Your gender"> <br /> <!-- 輸出被angularJS綁定的對象值 --> <h2>Your name: {{gender}}</h2> </div> <!-- 分割線 --> <hr color="green" size="7"> <!-- 另外一個div塊(為了說明ng-app是有作用范圍的) --> <div>hello</div> {{gender}} </div> </body> </html>
3. 運行效果
<1> 不輸入任何信息，運行結果：
<2> 輸入信息，運行結果：
4. 小結：
<1> ng-app是有范圍的：
ng-app只在其作用域范圍內有效。代碼中有2個div塊，第一個div塊中有ng-app，第二個沒有，所以第一個里面能(通過{{}})取到輸入框中gender的值，第二個不能。
<2> 作用域：
html中成對的標簽塊，比如<html></html>,<body></body>,<head></head>,<div></div>等等，這些標簽對之間就叫做作用域。
<3> 對象：
作用域中的屬性即為對象，比如<input>,<button>等等