Question

我2天前开始使用Angular.js，而且我的学习速度非常慢，所以我可以获得有关它如何运作的知识，而不仅仅是关于Angular的一般概念，所以不要这样做。如果问题是新手，请对我这么粗鲁：）

基本上我是在网上（教程，书籍，视频）学习Angular，今天就开始使用Code Academy，所以我记得基本的概念。问题是，当我开始学习如何定义控制器时，让我感到困惑。

这就是Code Academy

上定义控制器的方式

app.controller('MainController',['$scope',function($scope){
  $scope.title='to your own string';
  $scope.promo='new promo here'
}]);

我读过的书中定义的控制器

app.controller('FirstController', function($scope) {
  $scope.counter = 0;
  $scope.add = function(amount) { $scope.counter += amount; };
  $scope.subtract = function(amount) { $scope.counter -= amount; };
});

我无法理解这些之间的区别。有人可以向我解释一下吗？或者它只是来自不同版本角度的代码，第二个代码是对的吗？

Answer 1

他们都工作并做同样的事情。第一个是更加冗长，因为它在数组中作为参数列出之前显示了数组中的依赖关系。根据谷歌的标准，前者是首选。

Answer 2

不同之处在于，当您缩小javascript文件时，第二个可能无效。这就是为什么第一种方法是首选的原因。

想象一下，你缩小了一个文件。

第一种方法：

app.controller('MainController', function(a){

第二种方法：

phpinfo();

如何在缩小后知道什么是'a'？在第一种方法中，它知道因为你传递一个字符串'$ scope'，所以它知道'a'是$ scope。

Answer 3

第一种方式是首选方式。这是因为如果你以第二种方式执行它然后缩小它，$scope变量（以及任何其他依赖项）将失去其含义。因此，将依赖项作为数组（第一种方式）可以使代码在缩小时正常工作。

请查看此答案以获取更多信息：Angularjs minify best practice

Answer 4

两者都做同样的事情，但你注意到了一个关键的区别。

不同之处在于第一个示例在调用app.controller时定义了一个值数组。为什么将$scope作为字符串值传递？

<强>缩小

如果您正在创建一个需要尽可能高效的应用程序，那么您的用户不必再等待任何额外的毫秒才能下载。你想要缩小它。

缩小是使Javascript代码尽可能小的过程。将500k的Javascript缩小到50k或100k可能是可能的。这是通过删除无关的信息，评论，空格等来完成的。

但在这种特殊情况下，缩小通常也会将参数名称更改为更小的值。

例如，缩小可能会改变这一点：

Test("This is a test.");

function Test(myLongParameterNameHere) {
    console.log(myLongParameterNameHere.length)
}

到此：

a("This is a test");

function a(b) {
    console.log(b.length);
}

看看它有多小？

然而，Angular正在分析参数的确切名称。当它看到名为＆＃34; $ scope＆＃34;的参数时，它知道如何将适当的$ scope信息添加到该参数。当缩小器将其改变为其他东西时，Angular会感到困惑。

因此，您可以通过以与参数列表相同的顺序指定字符串数组来为Angular提供一个提示，如下所示：

app.controller('MainController',['$scope', '$timeout', '$rootScope', function($scope, $timeout, $rootScope) { $scope.title ='to your own string'; $timeout(function() { console.log("Timout fired") }, 500); $rootScope.test = "Hello World"; }]);

缩小后，此控制器代码可能如下所示：

app.controller('MainController',['$scope', '$timeout', '$rootScope', function(a, b, c) { a.title ='to your own string'; b(function() { console.log("Timout fired") }, 500); c.test = "Hello World"; }]);

Minifiers不会更改字符串的名称。

你告诉Angular哪个参数属于其特定的Angular对应物。即使在缩小之后，Angular也拥有进行依赖注入所需的信息。

<强> TL; DR

在数组中将参数名称添加为字符串是完全可选的，但如果您计划对Javascript进行任何缩小，则必须使用它。

Angular定义一个控制器

4 个答案: