模板：即编写的html和css的文件，展现应用的视图。angularjs可以在html中构建自己的html标记！
控制器:与ajax不同，不需要另外编写侦听器或dom控制器，因为它已经内置到angularjs中。 好处：便于编写，测试，维护和理解。
模型数据：模型是从angularjs做用域对象的属性引申的。模型的数据可能是js对象，数组或基本类型，但都属于angularjs作用域对象。
如何理解angularjs中的作用域？
即一个作用域可以视作模板，模型和控制器协同工作的粘接器，angularjs使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但他们两者确实时同步的！任何对于模型的更改都会即时反映到视图上，任何视图的更改都会被立刻体现在模型中。
视图：在angularjs中，一个视图是模型通过html模板渲染之后的映射。即不论模型什么时候发生变化，angularjs会实时更新结合点，随之更新视图。
还是贴码来看，更加直观！
<!doctype html> <html ng-app="HelloAngular"> <head> <meta charset="utf-8"> <script src="https://code.angularjs.org/angular-1.0.1.min.js"></script> <script> //模块化 var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular myModule.controller("helloAngular", ['$scope', function HelloAngular($scope) { $scope.value = { name: 'jiangting' }; } ]); </script> </head> <body> <!-- mvc看angular--> <div ng-controller="helloAngular"> －－控制器为helloAngular <p>{{value.name}},hello!</p> </div> <!-- angular 模块化 --> </body> </html>
我们来看看controller的应用，即控制器，即控制器通过操作数据，将其进行绑定，展现在html页面上。
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。我们用上面的列子来看：
AngularJS模块定义应用：
var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular
angularjs控制器控制应用：
myModule.controller("helloAngular", ['$scope', function HelloAngular($scope) { $scope.value = { name: 'jiangting' }; } ]);
了解前端mvc
关于controller特性：
1.不要试图去服用controller，一个控制器一般只负责一个小块视图
2.不要直接在controller中操作dom，这不是其职责
3.不要在controller里面做数据过滤的操作，ng有filter服务
4.不要在controller里面做数据格式化，ng有很好用的表单控件
5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过 filter服务4.不要在controller里面做数据格式化，ng有很好用的表单控件5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过scope进行调用
下面看下如何自定义指令系统，代码如下：
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <script src="https://code.angularjs.org/angular-1.0.1.min.js"></script> <script> //指令系统 var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'E', template: '<div>Hi everyone!</div>', --这里我们插入一段html标签 replace: true } }); </script> </head> <body> <hello></hello> </body> </html>
directive中，后面返回有三个参数，其中template中指所插入的html标签。现在我门自己来写一段html代码，看看如何将其变为angularjs的写法。
原静态html代码如下：
<ul> <li> <span>new1</span> <p>just a test page1</p> </li> <li> <span>new2</span> <p>just a test page2</p> </li> </ul>
将其改版为angularjs的写法如下：
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <script src="https://code.angularjs.org/angular-1.0.1.min.js"></script> <script> //$scope为控制器的作用域， //angularjs作用域：可以视作模板，当应用启动之后，会有一个根作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。 function newsCtrl($scope){ $scope.news=[ {"content":"new1", "introduce":"just a test page1"}, {"content":"new2", "introduce":"just a test page2"} ]; $scope.phones={ length:"4" // 单个的属性不能加分号，多个属性用逗号分隔 }; } </script> </head> <body ng-controller="newsCtrl"> <ul> <li ng-repeat="new in news"> {{new.content}} <p>{{new.introduce}}</p> </li> </ul> </body> </html>