AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML，且通過 表達(dá)式 綁定數(shù)據(jù)到 HTML。
AngularJS 是一個 JavaScript 框架
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 文件形式發(fā)布的，可通過 script 標(biāo)簽添加到網(wǎng)頁中：
 | 我們建議把腳本放在 <body> 元素的底部。 這會提高網(wǎng)頁加載速度，因為 HTML 加載不受制于腳本加載。 |
|---|
各個 angular.js 版本下載： https://github.com/angular/angular.js/releases
AngularJS 擴展了 HTML
AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應(yīng)用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
實例講解：
當(dāng)網(wǎng)頁加載完畢，AngularJS 自動開啟。
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"。
ng-model 指令把輸入域的值綁定到應(yīng)用程序變量 name。
ng-bind 指令把應(yīng)用程序變量 name 綁定到某個段落的 innerHTML。
| 如果您移除了 ng-app 指令，HTML 將直接把表達(dá)式顯示出來，不會去計算表達(dá)式的結(jié)果。 |
|---|
什么是 AngularJS？
AngularJS 使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序（SPAs：Single Page Applications）變得更加容易。
AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。
AngularJS 可以克隆和重復(fù) HTML 元素。
AngularJS 可以隱藏和顯示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代碼。
AngularJS 支持輸入驗證。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應(yīng)用程序變量。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName='John'"> <p>姓名為 <span ng-bind="firstName"></span></p> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
| HTML5 允許擴展的（自制的）屬性，以 data- 開頭。 AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網(wǎng)頁對 HTML5 有效。 |
|---|
帶有有效的 HTML5：
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名為 <span data-ng-bind="firstName"></span></p> </div> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
AngularJS 表達(dá)式
AngularJS 表達(dá)式寫在雙大括號內(nèi)：{{ expression }}。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。
AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一個表達(dá)式： {{ 5 + 5 }}</p>
</div>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
AngularJS 應(yīng)用
AngularJS 模塊（Module） 定義了 AngularJS 應(yīng)用。
AngularJS 控制器（Controller） 用于控制 AngularJS 應(yīng)用。
ng-app指令定義了應(yīng)用, ng-controller 定義了控制器。
實例
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p>嘗試修改以下表單。</p>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
</body>
</html>運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
AngularJS 模塊定義應(yīng)用:
AngularJS 模塊
AngularJS 控制器控制應(yīng)用:
AngularJS 控制器
$scope.firstName= "John";
$scope.lastName= "Doe";
});
在接下來的教程中你將學(xué)習(xí)到更多的應(yīng)用和模塊的知識。