AngularJS是Google开发的一个开源JavaScript框架，它用于开发动态网页应用。AngularJS的核心概念之一是模块化，其中控制器（Controller）是用来增强模型（Model）与视图（View）之间的交互的。在AngularJS中，控制器是构成应用程序的主要构建块之一。
本文将分享AngularJS中控制器（Controller）的三种不同写法，并通过示例代码详细阐述每一种写法的使用方式。这三种写法分别为：
1. 使用数组注入依赖的写法
2. 使用直接函数注入依赖的写法
3. 传统的函数声明方式
控制器的目的是为了控制视图（HTML页面）的行为。在AngularJS中，通过声明和使用控制器，可以将业务逻辑与视图绑定，使得视图能够响应用户的交互。
1. 使用数组注入依赖的写法
AngularJS的依赖注入系统允许开发者声明控制器所需的依赖项。数组注入是一种古老的写法，现在已经较少使用，但它展示了依赖注入系统的灵活性。在这个示例中，控制器的依赖被放在一个数组的第一个位置，而该位置的元素本身是一个数组，包含了依赖项的名称。函数的参数顺序与数组中定义的顺序相同。函数的体内包含了控制器的所有逻辑。
示例代码如下：
```javascript
var AppController = ['$scope', function($scope){
$scope.notifyServiceOnChage = function(){
console.log($scope.windowHeight);
};
}];
app.controller('AppController', AppController);
```
在这里，`AppController` 被定义为一个数组，数组的第一个元素是字符串`'$scope'`，表明该控制器需要注入`$scope`服务。紧随其后的是一个匿名函数，该函数接收`$scope`对象作为参数，代表控制器的作用域。随后，我们使用`app.controller()`方法注册控制器，并将`AppController`绑定到应用上。
2. 使用直接函数注入依赖的写法
第二种写法是直接在函数内定义依赖注入，这种方式更为简洁直观，也是目前推荐的写法。该写法直接把依赖服务作为参数传入函数中，AngularJS框架会处理相关的依赖注入过程。
示例代码如下：
```javascript
app.controller('AppController', ['$scope', function($scope){
$scope.notifyServiceOnChage = function(){
console.log($scope.windowHeight);
};
}]);
```
这里`'$scope'`同样表示控制器需要注入`$scope`服务，但它现在是作为函数参数的字符串直接传入。函数体内定义了控制器的逻辑。注意，这种方式不需要预先定义一个控制器变量，而是直接将函数作为第二个参数传递给`app.controller()`方法。
3. 传统的函数声明方式
第三种写法是传统的函数声明方式，即直接定义一个函数，然后将函数的引用传递给控制器的注册方法。这种方式不需要任何特殊的注入语法，函数在被引用时，AngularJS会处理依赖注入。
示例代码如下：
```javascript
function AppController($scope){
$scope.notifyServiceOnChage = function(){
console.log($scope.windowHeight);
};
}
app.controller('AppController', AppController);
```
在这里，`AppController`是一个函数，它接受`$scope`作为参数，并在函数体内部执行控制器逻辑。与前两种写法不同，这里我们首先定义了一个普通函数，随后再将此函数作为参数传递给`app.controller()`。
总结
以上三种方法均可在AngularJS中使用，但推荐使用第二种直接函数注入依赖的写法，因为它的可读性好且符合AngularJS的现代实践。使用这些控制器写法可以帮助开发者更好地组织代码，实现代码的模块化与可维护性。无论是数组注入方式还是函数声明方式，都是依赖注入系统在AngularJS中灵活应用的体现。
在开发实践中，推荐深入理解依赖注入的工作原理和控制器的不同写法，以便在构建复杂的单页应用程序（SPA）时能够更加得心应手。如果还有任何疑问或者需要进一步的学习，可以留言交流，相互学习，共同进步。
