Question

我在其网站上关注the AngularJS tutorial，此时我的控制器如下，页面加载完美：

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
});

正如我正在做的那样＆＃34;关于缩小的注意事项＆＃34;第5步的一部分，我提出了这个：

var phonecatApp = angular.module('phonecatApp', []);
function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
}
//phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);

页面加载第二个代码就好了，我从模块中注释了控制器的创建。我的问题是，从模块声明控制器和定义函数

之间的区别是什么

Answer 1

实际执行/行为没有区别，第二个是使用称为＆＃39; function constructor＆＃39;的东西。这是在javascript中创建类似类结构的常用方法。

引擎盖下的第一个将做同样的事情，只是那个角度很快。依赖注入模型使用字符串，因此更容易阅读。

Answer 2

声明全局功能，AFAIK是可能的，以简化简单的演示并快速加快速度。在最新版本的Angular中，默认情况下不再支持它（请参阅https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018）。

无论如何，使用大量功能污染全局命名空间都是不好的做法。

Answer 3

查看Todd Motto的角度样式指南：http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

将控制器定义为函数表达式对于保持代码DRY并允许命名堆栈跟踪非常重要：

这没关系：

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
}

问题在于这将功能置于全球范围内; ohhh nooo 。解决方案是将声明包装在IIFE中。这使您可以保持定义功能的最佳实践，并且不会污染全局范围。

以下是一个例子：

(function () {
  angular.module('app', []);

  // MainCtrl.js
  function MainCtrl () {

  }

  angular
    .module('app')
    .controller('MainCtrl', MainCtrl);

  // AnotherCtrl.js
  function AnotherCtrl () {

  }

  angular
    .module('app')
    .controller('AnotherCtrl', AnotherCtrl);

  // and so on...

})();

Answer 4

像这样：

function PhoneListCtrl($scope, $http) {

您的函数将在global范围内声明。

我们知道污染全球范围显然是不好的，因为它可能导致变量/功能冲突。

通过将其包装在控制器中，可以隔离范围。

AngularJS：声明与不声明控制器

4 个答案: