AngularJS函数声明,定位和嵌套

时间:2015-12-13 10:17:03

标签: javascript angularjs

我是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包含所有指令等等。)

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

有什么区别?

1 个答案:

答案 0 :(得分:2)

  

有什么区别?

你的第一个例子

在第一个示例中,您将通过函数表达式创建函数,作为调用myApp.controller('mainCtrl', function mainCtrl($scope){ // Gives it a name -------------------^ $scope.message = 'Yes'; }); 的一部分。

在你的例子中,这些函数也是匿名的(它们没有名字),但你可以根据需要命名它们(除非你需要支持等同于IE8的IE8或IE传统模式)或更早):

.controller

This article在我贫穷的小博客上解释了为什么IE8及更早版本存在问题。)

由于除了myApp挂钩之外,函数没有任何引用它们的内容,除非您可以从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时引用这些函数。这些功能有名称(它们不是匿名的)。如果有意义的话,您可以在多个地方使用这些功能,而无需执行上面显示的变量。

在第二个示例中,您可以在单独的文件中声明这些函数,但为了在调用{{1}}时使用它们,您需要以某种方式获取它们的引用。有许多方法可以做到这一点,从RequireJS到SystemJS再到ES2015模块到Angular模块(我认为)或任何其他AMD机制。