可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

As an example, we have this index.html code:

<!DOCTYPE html>
<html ng-app="sample">
    <head>
    ...
    </head>
    <body>
        <div ng-controller="myController">
        ...
        <script src="js/modules/app.js"></script>
        </div>
    </body>
</html>

and in app.js we have a module and a controller:

var app = angular.module('sample', []);

// controller here

So my question is that, I have seen controllers defined in two types, as a controller, and as a plain function:

app.controller('myController', function(args){
...
});

var myController = function(args){
...
};

Which one should be used and why? I have mostly seen the first one used in Angular-based code, but even in tutorials I have come across the second. I personally don't use the second, as I have read it 'pollutes the global namespace'.

Another question I have is that I have seen this kind of usage for a controller:

app.controller('myController', ['$scope', '$http', function($scope, $http) {
...
}]);

Why do we need the array? Can't we make do with just the arguments?

回答1:

app.controller('myController', ['$scope', '$http', function($scope, $http) {

This is done to prevent JS minifiers from breaking your code, because angular relies on names for dependency resolutions.

As for the two styles of controller

app.controller('myController', function(args){
...
});

var myController = function(args){
...
};
app.controller('myController', myController);

It's a matter of personal taste. There's no functional difference.

回答2:

According to the Angular the array annotation based dependency injection or definition is the preferred way:

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

See Inline Array Annotation

This is the preferred way to annotate application components. This is how the examples in the documentation are written.

While at the other hand, the simplest way to get hold of the dependencies is to assume that the function parameter names are the names of the dependencies (which is not preferred for like production app).

someModule.controller('MyController', function($scope, greeter) {
  // ...
});

The Angular can infer the names of the services to inject by examining the function declaration and extracting the parameter names. In the above example, $scope and greeter are two services which need to be injected into the function.

However this method will not work with JavaScript minifiers/obfuscators because of how they rename parameters.

The resulting code after minification will be like this:

someModule.controller('MyController', function(a, b) {
  // ...
});

So now, the Angular does not know what is the dependency a & b while if you use the array annotation based, the output will be:

someModule.controller('MyController',['$scope','greeter', function(a,b) {
  // ...
}]);

So, now Angular can map a with $scope and b with greeter and will be able to resolve the dependency.

回答3:

The first question is mostly about style, since both methods are correct. There might be arguments about both ways of defining controllers and other Angular modules. But as it is with every language in Software Development: Find a coding style and stick to it. Inconsistencies are the real problem. Here's a good style guide to stick to: https://github.com/johnpapa/angular-styleguide

The second question has to do with minification. Please read this article: http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/

回答4:

Syntax for Controllers

The most preferred way for Angular 1.x version is to use Controller As syntax. Please see code below:

(function () {
    'use strict';

    angular.module('app.controllers')
        .controller('HeadController', HeadController);

    HeadController.$inject = ['someService'];

    function HeadController(someService) {
        /* jshint validthis: true */
        var vm = this;

        vm.logout = action;

        function action() {
            someService.doSomeAction();
        }
    }

})();

In your html it will be used like this:

<div ng-controller="HeadController as vm">
    <a href ng-click="vm.logout();" id="item-btn-logout"><i class="icon-off">
</div>

I prefer this syntax. This will let you not to use scope in your views.

Take a look at John Papa AngularJS guide - it is good!

If you are still thinking that it's too complicated and you ain't gonna need it - refer to this article that explains how to avoid Scope Soup in Angular.

Why do we need the array?

Array with plain text is used during injection of dependencies. This will let you minify your code easily and not to lose dependency names during initialization process. If you are not going to do this and minify your code - you are risking that your code won't work.