Question

例如，我们有index.html代码：

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

在app.js我们有一个模块和一个控制器：

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

// controller here

所以我的问题是，我看到控制器定义为两种类型，控制器和普通函数：

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

或

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

应该使用哪一个？为什么？我大多看过基于Angular的代码中使用的第一个，但即使在教程中我也遇到了第二个。我个人不使用第二个，因为我已经读过它“污染全局命名空间”。

我的另一个问题是我已经看到了控制器的这种用法：

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

为什么我们需要阵列？我们不能只用这些论点吗？

Answer 1

根据Angular，基于数组注释的依赖注入或定义是首选方式：

event event_a is rise(port_a$)@sim;

请参阅Inline Array Annotation

这是注释应用程序组件的首选方法。这是如何编写文档中的示例。

另一方面，获取依赖关系的最简单方法是假设函数参数名称是依赖项的名称（对于类似的生产应用程序不是首选）。

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

Angular可以通过检查函数声明和提取参数名称来推断要注入的服务的名称。在上面的示例中，someModule.controller('MyController', function($scope, greeter) { // ... });和$scope是需要注入函数的两个服务。

但是这种方法不适用于JavaScript minifiers / obfuscators，因为它们重命名参数。

缩小后生成的代码如下：

greeter

现在，Angular不知道什么是依赖someModule.controller('MyController', function(a, b) { // ... });＆amp; a如果您使用基于数组的注释，则输出将为：

因此，现在Angular可以将someModule.controller('MyController',['$scope','greeter', function(a,b) { // ... }]);与a和$scope与b进行映射，并且能够解决依赖关系。

Answer 2

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

这样做是为了防止JS minifiers破坏您的代码，因为angular依赖于依赖项解析的名称。

至于两种风格的控制器

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

VS

    function newLine() {
        Starts here..//Works fine
    }
Starts here now..

这是个人品味的问题。没有功能差异。

Answer 3

第一个问题主要是关于风格，因为两种方法都是正确的。可能存在关于定义控制器和其他Angular模块的两种方式的争论。但正如软件开发中的每种语言一样：找到一种编码风格并坚持下去。不一致是真正的问题。这是一个很好的风格指南，坚持：https://github.com/johnpapa/angular-styleguide

第二个问题与缩小有关。请阅读这篇文章：http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/

Answer 4

控制器语法

Angular 1.x版本最首选的方法是使用Controller As语法。请参阅以下代码：

(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();
        }
    }

})();

在html中，它会像这样使用：

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

我更喜欢这种语法。这样您就不会在视图中使用scope。

看看John Papa AngularJS guide - 这很好！

如果您仍然认为它太复杂而且您不需要它 - 请参阅这篇解释如何avoid Scope Soup in Angular 的文章。

为什么我们需要数组？

在注入依赖项期间使用带纯文本的数组。这将使您可以轻松地缩小代码，而不是在初始化过程中丢失依赖项名称。如果您不打算这样做并缩小代码 - 您将面临代码无效的风险。

哪个是定义AngularJS控制器的首选方法？

4 个答案:

控制器语法

为什么我们需要数组？