AngulaJs簡介
AngularJs是一個JavaScript框架，AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
1.開始使用AngularJs
AngularJs是由JavaScript語言編寫的庫，可通過<script>標籤來添加到頁面文件中
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>2.AngularJs表達式
AngularJs中的表達式用{{expression}}來表示
AngularJs中的表達式和JavaScript很像，可以包括文字，運算符還有變量
實例
{{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
3.AngularJs對象
AngularJs對象就像JavaScript對象
person={firstName:'apple',lastName:'banana'}
4.AngularJs數組
persons={1,3,4,5,4}
訪問數組元素時第三個值爲{{persons[2]}}
5.AngularJs指令
AngularJs通過指令（directivs）來擴展html，帶有前綴ng-
5.1ng-app
ng-app初始化一個AngularJs應用程序
ng-app 告訴AngularJs他所活躍的範圍
<span style="white-space:pre"> </span><div ng-app="">
<span style="white-space:pre"> </span> </div>5.2 ng-init
ng-init用來初始化應用程序數據
<div ng-app="" ng-init="fruit='apple'">
<p>the fruit is {{fruit}}</p>
</div>the fruit is apple
5.3ng-model
ng-model把元素值綁定到應用程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div ng-app="">
<p>在輸入框中嘗試輸入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>
下方的文字隨輸入框的改變而改變，因爲name已經被綁定到input框中
5.4ng-bind
ng-bind實現數據綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div ng-app="" ng-init="fruit='apple'">
<p>{{fruit}}</p>
<p ng-bind="fruit"></p>
</div>
<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
</body>
</html>
效果如下
在這裏，兩種方法得到的結果是一樣的，看起來是這樣，但是還存在着差別（可以把我舉例子的代碼運行一下看看），是當使用{{}}語法時，瀏覽器會先渲染index.html 文件，AngularJs才能進行解析，即用數據來替換模板中的花括號，在這段小小的間隔用戶就可能看到數據改變的這一過程，所以當需要對頁面的數據進行綁定的話，建議使用ng-bind。
5.5ng-repeat
ng-repeat會對數組中每個項都會克隆一次html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div ng-app="" ng-init="fruits=[
{type:'apple', weight:'2kg'},
{type:'orange', weight:'1.5kg'}]">
<p ng-repeat="fruit in fruits">{{fruit.type+' '+fruit.weight}}</p>
</div>
<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
</body>
</html>
6.AngularJs控制器
AngularJs是常規的JavaScript對象，由標準的JavaScript對象的構造函數創建，ng-controller指令定義了應用程序控制器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
type: <input type="text" ng-model="type"><br>
weight: <input type="text" ng-model="weight"><br>
<br>
您要購買的水果是: {{type + " " + weight}}
</div>
<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type = "apple";
$scope.weight = "3.3kg";
});
</script> 
ps:
1.ng-app用來指定angularJs的活躍範圍
2.ng-controller是定義一個控制器
3.myCtrl是JavaScript函數
4.$scope是作用域
控制器也可以寫在外部文件中，如果將上文中的JavaScript存到一個js文件（mycrl.js）中，則可以在頁面文件中直接引用該文件
<script src="myctrl.js"></script>7.AngularJs過濾器
filter過濾器 用管道字符 | 來表示
7.1 uppercase
將字符串格式化爲大寫
將上文例子13行代碼改爲
您要購買的水果是: {{type|uppercase}}
7.2 lowercase
將字符串格式化爲小寫
將上文例子13行代碼改爲
您要購買的水果是: {{type|lowercase}}
7.3 currency
將數字格式化爲貨幣形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
type: <input type="text" ng-model="type"><br>
weight: <input type="text" ng-model="weight"><br>
price:<input type="text" ng-model="price"><br>
<br>
您要購買的水果是: {{type+" "+weight}}
單價爲:{{price|currency}}
</div>
<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type = "apple";
$scope.weight = "3.3kg";
$scope.price = "2";
});
</script>
7.4 orderBy
根據表達式排列數組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div ng-app="" ng-init="fruits=[
{type:'straberry', weight:'3kg'},
{type:'lemo', weight:'2.2kg'},
{type:'apple', weight:'2kg'},
{type:'orange', weight:'1.5kg'}]">
<p ng-repeat="fruit in fruits|orderBy:'type'">{{fruit.type+' '+fruit.weight}}</p>
</div>
<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
</body>
</html>
7.5filter
filter可以取得子集 該指令後跟着冒號和模型名稱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div ng-app="" ng-init="fruits=[
{type:'straberry', weight:'3kg'},
{type:'lemo', weight:'2.2kg'},
{type:'apple', weight:'2kg'},
{type:'orange', weight:'1.5kg'}]">
<input type="text" ng-model="test">
<p ng-repeat="fruit in fruits|filter:test|orderBy:'type'">{{fruit.type+' '+fruit.weight}}</p>
</br>
</div>
<script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
</body>
</html>
