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

我从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*/
});

我有点困惑，我不知道什么是最好的方式来声明我的组件(控制器，工厂，常量等…)

重要的是理解所有这些做法之间的异同。然后你可以使用你喜欢的技巧。

让我们检查第一个:

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

不需要变量

这种技术有一个缺点:它不支持最小化，原因在https://docs.angularjs.org/tutorial/step_05的"最小化说明"一节中描述，除非使用像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) {
   ...
});

如果使用minifier，您只需要声明两次依赖项。在大多数情况下，第三种方法就可以了。

相关内容

最新更新

热门标签：