Question

我对AngularJS所面临的一个挫折是示例中使用的各种样式。我已经看到了4种不同的方法来声明和添加AngularJS元素到模块（包括声明模块的不同方式）。 In another question我问过使用全局变量而不是直接声明模块。现在我想知道使用各种样式向模块添加元素有什么优点/缺点。（我不会包含为模块声明全局变量的示例，因为该样式已被打折为'bad practice'）

假设模块在文件myMod.js中声明为：

angular.module('myMod', [
        // Angular modules
        'ui.router'
        ,'ui.bootstrap'
        ,'ngResource'
        ,'ngStorage'

    ]);

现在我想在模块中添加一个控制器，我看到了：

（假设每个示例代表一个名为myController.js的文件的全部内容）

选项A：

angular.module('myMod')
        .controller.('thisController',['dependencyA','dependencyB',
        function(dependencyA, dependencyB){
....stuff to do
}]);

选项B：只需添加＆＃39;使用严格＆＃39;

'use strict';

 angular.module('myMod')
            .controller.('thisController',['dependencyA','dependencyB',
            function(dependencyA, dependencyB){
    ....stuff to do
    }]);

选项C：将整个事物包装在匿名函数中：

(function(){
'use strict';

angular.module('myMod')
            .controller.('thisController',['dependencyA','dependencyB',
            function(dependencyA, dependencyB){
    ....stuff to do
    }]);

选项D：在控制器声明中声明命名函数而不是匿名函数：

(function(){

'use strict'

angular
       .module('myMod')
       .controller('thisController',thisController);

thisController.$inject = ['dependencyA','dependencyB'];

function thisController(dependencyA,dependencyB){
...stuff to do
}

存在类似的不同示例，用于将工厂，服务，指令等添加到模块中。最好的我可以告诉他们这些是实现相同目标的不同风格。哪种技术代表了最佳实践＆＃39;和＆＃39;为什么＆＃39;？

（我不希望这变成一个观点片段，请提供选择一种风格的目标＆＃39;

Answer 1

至于“use strict”，这与AngularjJS本身无关。它是一个Javascript指令，强制执行严格模式，禁止在Javascript中使用未声明的变量。包含角度代码的立即调用函数表达式（IIFE）可防止变量泄漏到全局范围。至于声明一个命名函数，在我看来，这会导致更清晰的代码，并且是我的首选方式。

Answer 2

他们都执行相同的工作，我个人使用命名函数方法。但如果你愿意，你可以将它们结合起来。

angular
       .module('myMod')
       .controller('thisController',['dependencyA', thisController]);

thisController.$inject = ['dependencyB'];

function thisController(dependencyA,dependencyB){
...stuff to do
}

我使用TypeScript，所以我的控制器看起来像这样。

export class thisController
{
        static $inject = ['DependencyA'];
        constructor(private _dependencyA: DependencyA)
        {

        }
}
 angular.module('myMod').controller('thisController', thisController)

AngularJS锅炉板语法

2 个答案: