單頁Web應用（SinglePage）
顧名思義，只使用一個頁面的Web應用程序.單頁面應用是指用戶通過瀏覽器加載獨立的HTML頁面，Ajax加載數據頁面無刷新，實現操作各種操作。
模板（template）
在AngularJS中，一個模板就是一個HTML文件。但是HTML的內容擴展了，包含了很多幫助你映射model到view的內容。
» HTML模板將會被瀏覽器解析到DOM中。
» DOM然后成為AngularJS編譯器的輸入。
» AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。
» 所有的指令都負責針對view來設置數據綁定。
通過下面的DEMO我們一起了解一下Angularjs 內置模板引擎：
<!--模板（template）: 這里的模板是指前端模板，在angularjs 之外已經有非常豐富的JavaScript模板引擎了，例如artTemplate，Mustache，doT.js等。 Angularjs 內置有自己的模板引擎。 通過下面的DEMO我們一起了解一下Angularjs 內置模板引擎：--> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>angularjs 模板解釋</title> <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script> <script type="text/javascript"> //聲明一個私有函數域 (function () { var app = angular.module("MyModule", []); //創建模塊 app.controller("tmplController", ["$scope", function ($scope) { //給變量val賦值 $scope.val = "Hello Angularjs template"; //給變量list賦值 $scope.list = [ { title: "cnblogs", url: "http://www.cnblogs.com" }, { title: "codeproject", url: "http://www.codeproject.com/" }, { title: "google", url: "http://www.google.com/" } ] //給變量hasValue賦值 $scope.hasValue = false; }]); })() </script> </head> <body ng-app="MyModule"> <div ng-controller="tmplController"> <!--普通輸出--> <div>{{val}}</div> <!--循環--> <ul ng-repeat="item in list"> <li><a href="{{item.url}}" rel=nofollow>{{item.title}}</a></li> </ul> <!--條件語句--> <div ng-if="!hasValue"> Angularjs條件語句 </div> </div> </body> </html> <!--以上代碼首先創建一個"MyModule"模塊，然后在模塊中添加了一個名詞為"tmplController"的控制器，然后給scope添加三個屬性“val”，“list”，“hasValue”，並賦值。 在模板頁面設置angularjs作用域為"body"標簽內,名詞為"Bobby"--> <!--例子中提供了3種輸出方式（普通輸出，循環，條件語句），當然angularjs不僅僅這幾種方式 “ng-repeat”，“ng-if” 這都是通過指令實現。-->
Controller（控制器）
Controller應該純粹地用來把service、依賴關系、以及其它對象串聯到一起，然后通過scope把它們關聯到view上。如果在你的 視圖里面需要處理復雜的業務邏輯，那么把它們放到controller里面也是一個非常不錯的選擇。
如果我要add一本書籍應該怎么辦呢？我應該在controller上面新增一個方法來處理這件事情嗎？ 不，原因在下面解釋。因為它是DOM交互/操作的一部分。
Controller（控制器）-注意點
不要試圖去復用Controller，一個控制器一般只負責一小塊視圖
不要在Controller中操作DOM，這不是控制器的職責
不要在Controller里面做數據格式化，ng有很好用的表單控件
不要在Controller里面做數據過濾操作，ng有$filter服務
一般來說，Controller是不會互相調用的，控制器之間的交互會通過事件進行
<!--控制器（controller）控制器可以理解為控制頁面某個區塊的方法。 其中有一個非常重要的對象 \(scope是這個控制器與頁面控制器區域溝通的橋梁。 angularjs最精華的部分是雙向綁定，失去了雙向綁定angularjs就失去了自己的靈魂。這也是和其他以DOM操作的框架比最大的區別。--> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>angularjs控制器介紹</title> <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script> <script type="text/javascript"> (function () { var app = angular.module("MyModule", []); app.controller("cntoController", ["$scope", function ($scope) { var defaults = "angularjs控制器介紹"; //設置值 $scope.val = defaults; $scope.click = function () { //通過內置的綁定方法click 我們重置字符串 $scope.val = defaults; }; }]); })() </script> </head> <body ng-app="MyModule"> <div ng-controller="cntoController"> <!--綁定值--> <div> <textarea ng-model="val"></textarea> </div> <!--輸出值--> <div>{{val}}</div> <!--綁定方法--> <div> <button ng-click="click()">重置</button> </div> </div> </body> </html> <!--我們首先創建了一個模塊，然后在模塊中添加一個控制器方法 "cntoController". 在控制器里我們給scope添加了一個屬性"val" 和一個方法 "click"。 在頁面中我們使用"ng-model"指令綁定控制器中設置的"val"-->