单页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"-->