Question

我从AngularJS开始，我遇到了一些问题，因为我在互联网上发现了许多关于如何声明代码的例子，但通常代码是不同的。

例如在控制器上：

(function(){
  angular.module('myApp')
    .controller('myCtrl', myCtrl);

  function myCtrl($scope, Restangular, myFactory) {
     /* Code here */
  }
)();

在其他页面中我发现了这种方式：

var myApp = angular.module('myApp');
myApp.controller('myCtrl', myCtrl);
myCtrl.$inject = [$scope,Restangular, myFactory];
function myCtrl($scope, Restangular, myFactory) {
  /* Code here */
}

而且，还不够......我发现了另一种方式：

var myApp = angular.module('myApp');
myApp.controller('myCtrl', function($scope, Restangular, myFactory) {
  /*Code here*/
});

我有点困惑，我不知道宣布我的组件的最佳方式是什么（控制器，工厂，常数等......）

感谢您提前。

Answer 1

重要的是要理解所有这些做法之间的相同点和不同点。然后，您将使用您喜欢的技术。

让我们来看看第一个：

(function(){
  angular.module('myApp')
    .controller('myCtrl', myCtrl);

  function myCtrl($scope, Restangular, myFactory) {
     /* Code here */
  }
)();

首先，它在自称匿名函数中完成所有操作。使用这个JavaScript技巧的原因是能够在不污染全局命名空间的情况下声明函数，从而使myCtrl成为可从任何地方访问的全局函数，并且可能与另一个全局函数冲突。

在匿名函数中，定义了一个名为myCtrl的函数。 angular.module('myApp')要求angular返回对先前定义的模块的引用，并将控制器函数作为控制器添加到返回的模块。它相当于

var myApp = angular.module('myApp');
myApp.controller('myCtrl', myCtrl);

除了它不需要变量。

这种技术有一个缺点：它不支持缩小，原因在＆＃34;关于缩小的注意事项＆＃34; https://docs.angularjs.org/tutorial/step_05的{{3}}，除非使用像ngAnnotate这样的预处理工具将此代码转换为可缩小的代码。

现在让我们来看看第二个：

var myApp = angular.module('myApp');
myApp.controller('myCtrl', myCtrl);
myCtrl.$inject = ['$scope','Restangular', 'myFactory'];
function myCtrl($scope, Restangular, myFactory) {
  /* Code here */
}

这里定义了全局变量myApp。那很糟糕。还定义了全局函数myCtrl。由于使用$ inject，这段代码将支持缩小。

让我们看看最后一个：

var myApp = angular.module('myApp');
myApp.controller('myCtrl', function($scope, Restangular, myFactory) {
  /*Code here*/
});

这里再次定义了一个全局变量myApp。控制器功能现在定义为匿名内联函数。这避免了定义全局函数。这段代码再次无法实现。

我的建议：如果您不使用ngAnnotate，请使用以下内容：

angular.module('myApp').controller('MyCtrl', ['$scope', 'Restangular', 'myFactory', function($scope, Restangular, myFactory) {
   ...
}]);

它不需要自动调用匿名函数，支持缩小，也不需要定义任何全局变量或函数。

如果您使用ngAnnotate，则上述代码可以简化为

angular.module('myApp').controller('MyCtrl', function($scope, Restangular, myFactory) {
   ...
});

最后，如果你真的希望你的控制器功能有一个名字（例如，为了调试目的，虽然我从来不需要它）：

angular.module('myApp').controller('MyCtrl', ['$scope', 'Restangular', 'myFactory', function MyCtrl($scope, Restangular, myFactory) {
   ...
}]);

或者，使用ngAnnotate：

angular.module('myApp').controller('MyCtrl', function MyCtrl($scope, Restangular, myFactory) {
   ...
});

Answer 2

如果您使用缩放器，则只需要声明两次依赖项。在大多数情况下，第三种方式都没问题。

在AngularJS上构建控制器，服务代码的最佳方法

2 个答案: