AngularJS應用程序主要有三個組成部分：
模板（Templates）
模板是您用HTML和CSS編寫的文件，展現應用的視圖。 您可給HTML添加新的元素、屬性標記，作為AngularJS編譯器的指令。 AngularJS編譯器是完全可擴展的，這意味著通過AngularJS您可以在HTML中構建您自己的HTML標記！
應用程序邏輯（Logic）和行為（Behavior）
應用程序邏輯和行為是您用JavaScript定義的控制器。AngularJS與標准AJAX應用程序不同，您不需要另外編寫偵聽器或DOM控制器，因為它們已經內置到AngularJS中了。這些功能使您的應用程序邏輯很容易編寫、測試、維護和理解。
模型數據（Data）
模型是從AngularJS作用域對象的屬性引申的。模型中的數據可以是Javascript對象、數組或基本類型，他們都屬於AngularJS作用域對象。
AngularJS通過作用域來保持數據模型與視圖界面UI的雙向同步。一旦模型狀態發生改變，AngularJS會立即刷新反映在視圖界面中，反之亦然。
舉個例子：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
ng-app指令標記了AngularJS腳本的作用域，在<html>中添加ng-app屬性即說明整個<html>都是AngularJS腳本作用域。開發者也可以在局部使用ng-app指令，如<div ng-app>，則AngularJS腳本僅在該<div>中運行。
通過script標簽載入angular.js腳本時，angular監聽了DOMContentLoaded事件，當浏覽器將整個HTML頁面載入完畢後將會執行該angular.js腳本，angular.js腳本運行後將會尋找含有ng-app指令的HTML標簽，該標簽即定義了AngularJS應用的作用域。
輸入框<input ng-model="yourname" />元素綁定到一個叫yourname的模型中。
雙大括號標記將yourname模型添加到頁面中。雙大括號{{}}實現綁定的效果，告訴AngularJS需要運算其中的表達式並將結果插入DOM中。AngularJS表達式是一種類似於JavaScript的代碼片段，AngularJS表達式僅在AngularJS的作用域中運行，而不是在整個DOM中運行。
現在你試著在輸入框中鍵入您的名稱，您鍵入的名稱將立即更新顯示在頁面中。 這就是AngularJS雙向數據綁定的概念。 輸入框的任何更改會立即反映到模型變量（一個方向），模型變量的任何更改都會立即反映到頁面中（另一方向）。
我們再來看一個稍微復雜點的例子：
<html ng-app>
<head>
...
<script src="lib/angular/angular.js"></script>
<script>
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S","snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi","snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."}
];
}
</script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
這裡我們使用ngRepeat指令和兩個雙大括號包裹起來的AngularJS表達式——{{phone.name}}和{{phone.snippet}}。
在<li>標簽裡面的ng-repeat="phone in phones"語句是一個AngularJS迭代器。這個迭代器告訴AngularJS用第一個<li>標簽作為模板，為模型列表phones中的每一部手機創建一個<li>元素。
包裹在phone.name和phone.snippet周圍的雙大括號標識著數據綁定。和常量計算不同的是，這裡的表達式實際上是一個數據模型的引用，這些數據模型我們在PhoneListCtrl控制器裡面定義就好了。
在PhoneListCtrl控制器裡面初始化了數據模型，盡管控制器看起來並沒有起到什麼控制的作用，但是它在這裡起到了至關重要的作用。通過給定我們數據模型的定義，控制器允許我們建立模型和視圖之間的數據綁定。
我們是這樣把表現層，數據模型聯系在一起的：PhoneListCtrl——控制器方法的名字,和<body>標簽裡面的ngController指令的值相匹配。手機模型的數據此時與注入到我們控制器函數的作用域（$scope）相關聯。這個控制器的作用域對所有<body ng-controller="PhoneListCtrl">標記內部的數據綁定有效。
AngularJS的作用域理論非常重要：一個作用域可以視作模板、模型和控制器協同工作的粘接器。AngularJS使用作用域，同時還有模板中的信息，數據模型和控制器，幫助模型和視圖分離。
AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm
希望你喜歡，並分享我的工作~帶你走近AngularJS系列：
如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm
在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡