AngularJS:声明与不声明控制器

AngularJS:声明与不声明控制器,angularjs,angularjs-controller,Angularjs,Angularjs Controller,我在其网站上进行跟踪,目前我的控制器如下,页面加载完美: var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.o

我在其网站上进行跟踪,目前我的控制器如下,页面加载完美:

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';
});
当我在进行第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]);
页面加载的第二段代码很好,我对模块中控制器的创建进行了注释。我的问题是,从模块中声明控制器和定义函数之间有什么区别

function PhoneListCtrl($scope, $http) {
您的函数将在
全局
范围内声明

我们知道,这显然不利于污染全局范围,因为它可能导致变量/函数冲突

通过将其包装在控制器中,可以隔离作用域。

如下所示:

function PhoneListCtrl($scope, $http) {
您的函数将在
全局
范围内声明

我们知道,这显然不利于污染全局范围,因为它可能导致变量/函数冲突


通过将其包装在控制器中,您可以隔离作用域。

声明一个全局函数,AFAIK可以简化简单的演示并快速升级。在Angular的最新版本中,默认情况下不再支持它(请参见)


无论如何,用大量函数污染全局名称空间是一种不好的做法。

AFAIK声明了一个全局函数,可以简化简单的演示并快速升级。在Angular的最新版本中,默认情况下不再支持它(请参见)


无论如何,使用大量函数污染全局名称空间是一种不好的做法。

实际执行/行为没有区别,第二种是使用称为“”的东西。这是在javascript中创建类结构的常用方法


第一个引擎盖下的将做同样的事情,只是angularJs的依赖项注入模型使用字符串,因此这更易于阅读。

实际执行/行为没有区别,第二个使用的是一种称为“”的东西。这是在javascript中创建类结构的常用方法


引擎盖下的第一个将做同样的事情,只是angularJs的依赖注入模型与字符串一起工作,因此这更易于阅读。

请查看Todd的风格指南,了解angularJs:

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

这没关系:

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

  $scope.orderProp = 'age';
}
问题是,这将功能置于全球范围内;哦,不。解决方案是将声明包装在一个生命中。这允许您保持定义函数的最佳实践,并且不污染全局范围

下面是一个例子:

(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...

})();

查看托德格言的风格指南,了解:

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

这没关系:

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

  $scope.orderProp = 'age';
}
问题是,这将功能置于全球范围内;哦,不。解决方案是将声明包装在一个生命中。这允许您保持定义函数的最佳实践,并且不污染全局范围

下面是一个例子:

(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...

})();

禁用它是件好事:)禁用它是件好事:)一个模块足以隔离作用域(因为函数作为回调传递给Angular的控制器)。不需要生活,不需要生活。如果您确实想要一个命名的控制器函数,可以使用
angular.module('app').controller('AnotherCtrl',function AnotherCtrl(){…})@JBNizet您当然可以这样做。这只是另一种方法。我个人更喜欢它,因为它更容易组织代码,而不必在控制器声明中声明构造函数。一个模块足以隔离作用域(因为函数作为回调传递给Angular的控制器)。不需要生活,不需要生活。如果您确实想要一个命名的控制器函数,可以使用
angular.module('app').controller('AnotherCtrl',function AnotherCtrl(){…})@JBNizet您当然可以这样做。这只是另一种方法。我个人更喜欢它,因为它更容易组织代码,而不必声明封装在控制器声明中的构造函数。