本篇文章介紹了angularjs的框架知識點匯總，裡面有完整的實例，還有完整標籤的詳細解釋。接下來就讓我們一起來看這篇文章吧
1. AngularJS是什麼？
它是Google開發的一款具有MVC結構的前端框架。在Angular應用程式中，視圖層就是DOM，控制器就##JavaScript類，模型資料儲存在物件屬性中。
2.
資料綁定
透過宣告介面的某部分對應到 JavaScript 的屬性，讓他們自動的同步，這種程式設計方式就是資料綁定。不需要對欄位註冊監聽器，就可以做到物件屬性與介面顯示同步變化。
3.
依賴注入
不需要重新建立對象，將需要使用的物件$scope#或$loaction依照以下方式註入到建構函式中。這就是依賴注入。
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}登入後複製
4.
指令
框架的核心層有一個強大的 DOM 轉換引擎，可以讓你擴展 HTML 語法。 HTML中的ng-controller#是用來指定哪個控制器來服務哪個視圖，ng- model將一個輸入框綁定到模型部分。
我們稱這些叫 HTML 擴充指令。
5.
依據範例解釋各個標籤
#
<!DOCTYPE html>
<html ng-app>
<head>
<base/>
<title>Your Shopping Cart</title>
<script src="../frm/angular/angular.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<p 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>
<button ng-click="remove($index)"> Remove </button>
</p>
<script>
function CartController($scope) {
////@formatter:off
$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
}];
////@formatter:on
$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
}
</script>
</body>
</html>登入後複製
以上面的程式碼，對關鍵內容做個解釋：
1
）
ng-app
屬性告訴Angular它應該管理頁面的哪一部分。由於我們把它放在html元素上，告知Angular管理整個頁面。如果你正在整合Angular和一個已存在的使用其他方式管理頁面的應用，那麼你可能需要放在應用程式的##p上。 2
）
##在
Angular
中，用JavaScript類別管理的頁面區域叫做控制器。透過在body標籤中包含一個控制器，宣告的CartController將管理body標籤之間的任何東西。 3）
ng-repeat 代表為items陣列中每個元素拷貝一次這p中的 DOM。在p每次拷貝中，同時設定了一個叫做item的屬性代表目前的元素，所以我們能夠在模板中使用。正如你所看到的，每個p中都包含了產品名稱，數量，單價，總價和一個移除按鈕。
4） {{item.title}}
如演示的'Hello World'範例，資料綁定是透過{{ }}把變數的值插入到頁面某部分和保持同步。完整的表達式{{item.title}}檢索迭代中的目前項，然後將目前項目的titile屬性值插入到DOM。
5）
ng-model 定義建立了輸入欄位和item.quantity#之間的資料綁定。 span標籤中的{{
}}建立了一個單向聯繫，在這裡插入值。但是應用程式需要知道當使用者改變數量時，能夠改變總價，這是我們想要的效果。透過使用ng-model我們將與我們的模型保持同步變更。 ng-model申明將item.quantity的值插入輸入框中，無論何時使用者輸入新值都會自動更新item.quantity。
6） {{item.price | currency}}
#我們希望單價格式化成美元形式。 Angular 帶有一個叫過濾器的特性，能夠讓我們轉換文本，有一個叫currency 的過濾器將為我們做這個美元形式格式化。
7）
# 點選這個按鈕就可以呼叫 remove()函數。同時傳遞了$index，這個包含了ng-repeat的迭代順序，以便知道要移除哪一項。
8）function CartController($scope) {
CartController 管理這輛購物車的邏輯。透過這個我們告知 Angular控制器
#需要一個叫$scope 的物件。 $scope就是用來把資料綁定到介面上的元素的。
9）$scope.remove = function(index) {
$scope.items.splice(index, 1);
};
我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这
个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建
的这些
是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除
按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习）
6. 调用 Angular
任何应用使用 Angular 必须做两件事：
1）加载 angular.js
2）使用 ng-app告知Angular管理哪一部分的DOM
7. 加载脚本
很简单：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
登入後複製
推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。
8. 模块
<html ng-app='myApp'>
<body ng-controller='TextController'>
<p>{{someText.message}}</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController',
function($scope) {
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someText;
});
</script>
</body>
</html>登入後複製
在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。
只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。
9. 模板和数据绑定
Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在
