src和href屬性
Angularjs中src應寫成ng-src，href應寫成ng-href 例如：
代碼如下:
<img ng-src="/images/cats/{{favoriteCat}}">
<a ng-href="/shop/category={{number}}">Some text</a>
表達式
在模板中可以進行簡單的數學運算、比較運算、布爾運算、位運算、引用數組、和對象符號等 盡管我們可以使用表達式做很多事情，但是表達式是使用一個自定義的解釋器來執行的(Angular的一部分)，而不是用Javascript得eval()函數執行的，所以局限性較大。
雖然很多方面這裡的表達式比Javascript更嚴格，但是他們對undefined和null的容錯性更好，如果遇到錯誤，模板只是簡單的什麼都不顯示，而不會拋出一個NullPointerException錯誤。 例如：
代碼如下:
<div ng-controller='SomeController'>
<div>{{computer() /10 }}</div> //雖然是合法的，但是它把業務邏輯放到模板中了，應避免這種做法
</div>
區分UI和控制器的職責
控制器是綁定在特定DOM片段上的，這些片段就是他們需要負責管理的內容。有兩種主要的方法可以把控制器關聯到DOM節點上，一種在模板中通過ng-controller聲明，第二種是通過路由把它綁定到一個動態加載的DOM模板片段上，這個模板叫視圖。 我們可以創建嵌套的控制器，他們可以通過繼承數結構來共享數據模型和函數,真實的嵌套發生在$scope對象上，通過內部的原始繼承機制，父控制器對象的$scope會被傳遞到內部嵌套的$scope（所有屬性，包括函數)。例如：
代碼如下:
<div ng-controller="ParentController">
<div ng-controller="ChildController">...</div>
</div>
利用$scope暴漏模型數據
可以顯示創建$scope屬性，例如$scope.count = 5。還可以間接的通過模板自身創建數據模型。
通過表達式。例如
代碼如下:
<button ng-click='count=3'>Set count to three</button>
在表單項上使用ng-model
與表達式類似，ng-model上指定的模型參數同樣工作在外層控制器內。唯一的不同點在於，這樣會在表單項和指定的模型之間建立雙向綁定關系。
使用watch監控數據模型的變化
$watch的函數簽名是： $watch(watchFn,watchAction,deepWatch)
watchFn是一個帶有Angular表達式或者函數的字符串，它會返回被監控的數據模型的當前值。 watchAction是一個函數或者表達式，當watchFn發生變化時調用。其函數簽名為：
function(newValue,oldValue,scope） deepWatch 如果設置為true，這個可選的布爾值參數將會命令Angular去檢查被監控對象的每一個屬性是否發生了變化。如果你向監控數組中的元素，或者對象上的所有屬性，而不是值監控一個簡單的值，你就可以使用這個參數。注意，Angular需要遍歷數組或者對象，如果集合比較大，那麼運算復雜呢就會比較的重。
$watch函數會返回一個函數，當你不需要接收變更通知時，可以用這個返回的函數注銷監控器。
如果我們需要監控一個屬性，然後接著注銷監控，我們就可以使用以下的代碼： var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();
實例代碼如下:
代碼如下:
<html ng-app>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript">
function CartController($scope) {
$scope.bill = {};
$scope.items = [
{title:'Paint pots',quantity:8,price:3.95},
{title:'Polka dots',quantity:17,price:12.95},
{title:'Pebbles',quantity:5,price:6.95}
];
$scope.totalCart = function() {
var total = 0;
for (var i=0,len=$scope.items.length;i<len;i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
return total;
}
$scope.subtotal = function() {
return $scope.totalCart() - $scope.bill.discount;
}
function calculateDiscount(newValue,oldValue,scope) {
$scope.bill.discount = newValue > 100 ? 10 : 0;
}//這裡的watchAction函數
$scope.$watch($scope.totalCart,calculateDiscount);//這裡的watch函數
}
</script>
</head>
<body>
<div ng-controller="CartController">
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{totalCart()| currency }}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>SubTotal: {{subtotal() | currency}}</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
上面的watch存在性能問題，calculateTotals函數執行了6次，其中三次是因為循壞，每次循環，都會重新渲染數據。
下面是改良後的代碼
代碼如下:
<html ng-app>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript">
function CartController($scope) {
$scope.bill = {};
$scope.items = [
{title:'Paint pots',quantity:8,price:3.95},
{title:'Polka dots',quantity:17,price:12.95},
{title:'Pebbles',quantity:5,price:6.95}
];
var totalCart = function() {
var total = 0;
for (var i=0,len=$scope.items.length;i<len;i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
$scope.bill.totalcart = total;
$scope.bill.discount = total > 100 ? 10 :0;
$scope.bill.subtotal = total - $scope.bill.discount;
}
$scope.$watch('items',totalCart,true);//只用watch著items的變化
}
</script>
</head>
<body>
<div ng-controller="CartController">
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{bill.totalcart| currency }}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>SubTotal: {{bill.subtotal | currency}}</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
對於大型的itms數組來說，如果每次在Angular顯示頁面時只重新計算bill屬性，那麼性能會好很多。通過創建一個帶有watchFn的$watch函數，我們可以實現這一點。
代碼如下:
$scope.$watch(
var totalCart = function() {
var total = 0;
for (var i=0,len=$scope.items.length;i<len;i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
$scope.bill.totalcart = total;
$scope.bill.discount = total > 100 ? 10 :0;
$scope.bill.subtotal = total - $scope.bill.discount;
});
監控多個東西
如果你想監控多個屬性或者對象，並且當其中任何一個發生變化時就會去執行一個函數，你有兩種基本的選擇：
監控把這些屬性連接起來之後的值
把他們放在一個數組或者對象中，然後給deepWAtch參數傳遞一個值
分別說明：
在第一種情況下，如果你的作用域中存在一個things對象，它帶有兩個屬性a和b，當這兩個屬性發生變化時都需要執行callMe（）函數，你可以同時監控這兩個屬性 $scope.$watch('things.a + things.b',callMe(...));
當列表非常長，你就需要寫一個函數來返回連接之後的值。
在第二種情況下，需要監控things對象的所有屬性，你可以這麼做：
代碼如下:
$scope.$watch('things',callMe(...),true);
使用module組織依賴關系
provider(name,Object OR constructor()) 說明： 一個可配置的服務，創建邏輯比較的復雜。如果你傳遞了一個Object作為參數，那麼這個Object對象必須帶有一個名為$get的函數，這個函數需要返回服務的名稱。否則，angularjs會認為你傳遞的時一個構造函數，調用構造函數會返回服務實例對象。
factory(name,$get Function()) 說明：一個不可配置的服務，創建邏輯比較的復雜。你需要指定一個函數，當調用這個函數時，會返回服務實例。可以看成provider(name,{$get:$getFunction()})的形式。
service(name,constructor()) 一個不可配置的服務，創建邏輯比較的簡單。與上面的provider函數的constructor參數類似，Angular調用他可以創建服務實例。
使用module factory的例子
代碼如下:
<html ng-app='ShoppingModule'>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var ShoppingModule = angular.module('ShoppingModule',[]);
ShoppingModule.factory('Items',function() {
var items = {};
items.query = function() {
return [
{title:'Paint pots',description:'Pots full of Paint',price:3.95},
{title:'Paint pots',description:'Pots full of Paint',price:3.95},
{title:'Paint pots',description:'Pots full of Paint',price:3.95}
];
};
return items;
});
function ShoppingController($scope,Items) {
$scope.items = Items.query();
}
</script>
</head>
<body ng-controller='ShoppingController'>
<h1>Shop!!</h1>
<table>
<tr ng-repeat='item in items'>
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td>{{item.price | currency}}</td>
</tr>
</table>
</body>
</html>
引入第三方模塊
在大多數應用中，創建供所有代碼使用的單個模塊，並把所有依賴的東西放入這個模塊中，這樣就會工作的很好。但是，如果你打算使用第三方包提供的服務或者指令，他們一般都帶有自己的模塊，你需要在應用模塊中定義依賴關心才能引用他們。 例如：
var appMod = angular.module('app',['Snazzy','Super']);
關於filter的例子
代碼如下:
<html ng-app='ShoppingModule'>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var ShoppingModule = angular.module('ShoppingModule',[]);
ShoppingModule.filter('titleCase',function() {
var titleCaseFilter = function(input) {
var words = input.split(' ');
for(var i=0;i<words.length;i++) {
words[i] = words[0].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
};
return titleCaseFilter;
});
function ShoppingController($scope) {
$scope.pageHeading = 'this is a test case';
}
</script>
</head>
<body ng-controller='ShoppingController'>
<h1>{{pageHeading | titleCase}}</h1>
</body>
</html>