1. 控制器（Controller）定义
控制器（Controller）在AngularJS中作用是增强视图（View），AngularJS控制器是一个构造方法，用来向视图（View）中添加额外功能。
ng-controller指令定义AngularJS应用程序控制器。
控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。
当控制器通过ng-controller指令被添加到DOM页面时，AngularJS会通过控制器构造函数生成一个对象。
在生成构造函数对象过程中，$scope对象作为参数注入其中，并允许访问$scope对象。
通过$scope对象与页面中的元素进行数据绑定，实现数据从控制器（Controller）到视图（View）的过程。
2. 控制器初始化$scope对象
控制器（Controller）的作用是操作$scope对象，具体表现在：
◊ 初始化$scope对象
◊ 为$scope对象添加自定义实现
$scope对象可以看作是由控制器（Controller）封装后的ViewModel。
2.1 初始化$scope对象
示例代码：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("HelloCtrl", function($scope){ $scope.text = "Hello World!"; }); </script> </head> <body> <div ng-controller="HelloCtrl"> <div ng-bind="text"></div> </div> </body> </html>
2.2 为$scope对象添加自定义方法
示例代码：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("HelloCtrl", function($scope){ $scope.text = "Hello World!"; $scope.getText = function(){ $scope.text = "Hello AngularJS!"; return $scope.text; }; }); </script> </head> <body> <div ng-controller="HelloCtrl"> <div ng-bind="text"></div> <input type="button" value="ChangeText" ng-click="getText()" /> </div> </body> </html>
2.3 为$scope对象添加带参数方法
示例代码：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("HelloCtrl", ["$scope", function($scope){ $scope.text = "Hello World!"; $scope.getText = function(){ $scope.text = "Hello AngularJS!"; return $scope.text; }; $scope.setText = function(param){ $scope.text = param; }; }]); </script> </head> <body> <div ng-controller="HelloCtrl"> <div ng-bind="text"></div> <input type="button" value="ChangeText" ng-click="setText('Hello AngularJS!')" /> </div> </body> </html>
$scope对象方法多个参数之间逗号（，）隔开
2.4 $scope对象属性和方法的继承
AngularJS中的“ng-controller”指令允许在不同层次元素中指定控制器，处于内层控制器中的$scope对象将会自动继承外层控制器中的$scope对象的属性和方法。
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("ParentCtrl", ["$scope", function($scope){ $scope.text = "Text"; }]); app.controller("ChildCtrl", ["$scope", function($scope){ $scope.child_text = "Child Text"; }]); </script> </head> <body> <div ng-controller="ParentCtrl"> <div ng-bind="text"></div> <div ng-controller="ChildCtrl"> <div ng-bind="child_text"></div> </div> </div> </body> </html>
3. 作用域（Scope）
作用域（scope）是构成AngularJS应用的核心基础，AngularJS将$scope设计成和DOM类似的结构，$scope可以进行嵌套，可以引用父级$scope中的属性和方法。
3.1 $rootScope
AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。
$rootScope是AngularJS中最接近全局作用域的对象，不建议在$rootScope上绑定太多业务逻。
所有的应用都有一个$rootScope，可以作用在ng-app指令包含的所有HTML元素中。
$rootScope可作用于整个应用中。在$rootscope中定义的属性及方法，可以在各个controller的$scope中使用。
示例代码：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.run(["$rootScope", function($rootScope){ $rootScope.text = "Hello AngularJS!"; }]); </script> </head> <body> {{ text }} </body> </html>
3.2 $scope
AngularJS中$scope对象作为数据模型，自定义属性和方法，可以在控制器（Controller）和视图（View）中使用。
$scope对象的生命周期处理有四个不同阶段:
1>.创建
在创建控制器（Controller）或指令时，AngularJS会用$injector创建一个新的作用域（$scope），并在这个新建的控制器（Controller）或指令运行时注入作用域（$scope）。
2>.链接
当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。
所有创建$scope对象的函数也会将自身附加到视图中。
这些作用域将会注册当Angular应用上下文中发生变化时需要运行的$watch函数。
3>.更新
当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。
4>.销毁
当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。
示例代码：
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("HelloCtrl", ["$scope", function($scope){ $scope.text = "Hello AngularJS!"; }]); </script> </head> <body> <div ng-controller="HelloCtrl"> {{ text }} </div> </body> </html>
ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。
$scope与$rootScope具有相同属性或方法时，$scope将覆盖$rootScope中相同属性或方法。
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <script src="../lib/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("app", []); app.controller("HelloCtrl", ["$scope", "$rootScope", function($scope, $rootScope) { $rootScope.text = "Hello"; // $scope.text = "Hello AngularJS!"; }]); </script> </head> <body> <div ng-controller="HelloCtrl"> {{ text }} </div> </body> </html>