簡介
AngularJS 是一個 JavaScript 框架
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML
AngularJS表達式可以寫在HTML里面
AngularJS表達式不支持條件和循環(huán)語句，而且沒有exception語句
AngularJS表達式支持過濾器
AngularJS 應用組成
View(視圖), 即 HTML
Model(模型), 當前視圖中可用的數據($scope/$rootScope)
Controller(控制器), 即 JavaScript 函數欧啤，可以添加或修改屬性
指令
AngularJS 通過 ng-directives 擴展了 HTML
AngularJS 指令是以 ng 作為前綴的 HTML 屬性
ng-app 指令定義一個 AngularJS 應用程序
ng-controller 定義了控制器
注：一個頁面只能有一個ng-app极颓，可以有多個ng-controller
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序丽旅，可以為應用數據提供狀態(tài)值(invalid, dirty, touched, error)
ng-bind 指令把應用程序數據綁定到 HTML 視圖（雙向綁定）
ng-init 指令初始化 AngularJS 應用程序變量
ng-repeat 指令讓每個重復項都訪問了當前的重復對象锡足，對于集合中（數組中）的每個項會 克隆一次 HTML 元素
ng-show 指令驗證用戶輸入
ng-invalid 指令漓帚，處理當數據不合法的時候
詳細指令查詢：http://www.runoob.com/angularjs/angularjs-reference.html
表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}
AngularJS 表達式把數據綁定到 HTML（雙向綁定），這與 ng-bind 指令有異曲同工之妙
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字赋荆、運算符和變量
示例
ng-app不可省略
ng-init初始化變量
ng-bind綁定變量笋妥，顯示
<div ng-app="" ng-init="firstName='John'">
<p>姓名為 <span ng-bind="firstName"></span></p>
</div>
```
AngularJS 表達式使用
```html
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
```
ng-controller指令定義了應用程序控制器，控制器是 JavaScript 對象窄潭，由標準的 JavaScript 對象的構造函數 創(chuàng)建（如下）
$scope（相當于作用域春宣、控制范圍）用來保存AngularJS Model(模型)的對象
控制器也可以有方法（變量和函數），調用fullName這個方法需要括號
```html
<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}}
<br />
全名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName = "Doe";
$scope.fullName = function () {
debugger;
return $scope.firstName + " * " + $scope.lastName;
};
});
</script>
</script>
```
驗證用戶輸入
```html
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>
<p>在輸入框中輸入你的郵箱地址月帝，如果不是一個合法的郵箱地址，會彈出提示信息幽污。</p>
```
ng-invalid與required合用嚷辅，在數據合理/不合理的兩種情況下，顯示不同效果
```html
<style>
input.ng-invalid {
border-color:red;
}
</style>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myName" ng-model="myText" required>
</form>
<p>編輯文本域距误，不同狀態(tài)邊框顏色會發(fā)送變化簸搞。</p>
<p>文本域添加了 required 屬性，該值是必須的准潭，如果為空則是不合法的趁俊。</p>
```
摘自：http://www.runoob.com/angularjs/angularjs-intro.html