控制器Controller

AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。

ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。

所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。

每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。

现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：

<div ng-app="" ng-controller="MyController">

请输入一个名字：<input type="text" ng-model="person.name">

Hello <span ng-bind="person.name"></span>

</div>

<script>
function MyController($scope) {
$scope.person = {
name: "World"
};
}
</script>

如上所述，我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性，那参数$scope是什么呢，代表什么意思呢。

现在我们就来解答MyController对象参数 —— $scope。

scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢，就是作为scope的数据属性关联到DOM上的，并且能在需要调试的时候被获取到。

要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。

所有scope都遵循原型继承，这意味着它们都能访问父scope们,对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到rootScope上，这个rootScope是最顶级的scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。

也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。

控制器不仅声明属性也可以声明方法，如下所示：

<div ng-app="" ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click="sayHello()">打招呼</button>
<hr />
{{greeting}}
</div>

<script>
function MyController($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting= 'Hello ' + $scope.username + '!';
};
}
</script>

参考以上代码，赶快动手试试控制器的使用方法吧！

当然如果是开发条件的需要，我们也可以将控制器写在外部文件中，那如上示例该怎么做呢，很简单，如下简单引用即可：

<script src="MyController.js"></script>

环境的缘故这里就不做测试了，可在本地环境中一试效果。