AngularJS函数声明、定位和嵌套

Question

我是AngularJS新手，我读到您可以以两种不同的方式声明函数(也许更多.)：

第一：

var myApp = angular.module('myApp', []);

myApp.controller('mainCtrl', function($scope){
    $scope.message = 'Yes';
})

myApp.controller('anotherCtrl', function($scope){
    $scope.message = 'No';
})

第二：

var myApp = angular.module('myApp', []);

myApp
   .controller('mainCtrl', mainCtrl)
   .controller('anotherCtrl', anotherCtrl)

function mainCtrl($scope){
    $scope.message = 'Yes';
}

function anotherCtrl($scope){
    $scope.message = 'No';
}

使用第一种方法，我能够使用不同的文件(即：controllers.js与所有控制器，directives.js与所有指令，等等)。

我尝试使用第二种方法，如果函数在不同的文件中声明，则会出现错误，这是有意义的，因为它们在一个文件中调用，但是。另一方面，它对我来说更具可读性，因为嵌套较少，等等。

有什么关系？

Answer 1

有什么关系？

你的第一个例子

在第一个例子中，您通过函数表达式创建函数，作为调用myApp.controller的一部分。

在您的示例中，函数也是匿名的(它们没有名称)，但如果需要，可以将它们命名(除非您需要支持等同于IE8或更早版本的IE8或IE遗留模式)：

myApp.controller('mainCtrl', function mainCtrl($scope){
// Gives it a name -------------------^
    $scope.message = 'Yes';
});

(http://blog.niftysnippets.org/2010/09/double-take.html在我贫血的小博客上解释了为什么IE8和更早的时候会出现问题。)

由于这些函数没有任何引用它们的东西，所以不能在其他地方使用它们，除非您可以从.controller获得对它们的引用，或者如果您声明了一个变量并在调用的表达式中为它赋值：

var mainCtrl;

// ...

myApp.controller('mainCtrl', mainCtrl = function mainCtrl($scope){
    $scope.message = 'Yes';
});

// ...you could use the `mainCtrl` variable here if you needed
// to reuse the function

你的第二个例子

在第二个示例中，您通过函数声明创建函数，然后在调用myApp.controller时引用这些函数。函数有名称(它们不是匿名的)。如果有意义的话，您可以在多个地方使用这些函数，而不必执行上面所示的变量操作。

在第二个示例中，您可以在单独的文件中声明函数，但是为了在调用myApp.controller时使用它们，需要以某种方式获得对它们的引用。有很多方法可以做到这一点，从RequireJS到SystemJS到ES2015模块，角度模块(我认为)或任何其他的AMD机制。