Javascript 定义控制器的角度

2天前我开始使用Angular.js，我学习速度非常慢，因此我可以了解它如何工作得非常好，而不仅仅是关于Angular的一般概念，所以如果问题是新手，请不要对我如此粗鲁：）

基本上，我在网上旅行（教程、书籍、视频）学习Angular，从今天的CodeAcademy开始，所以我可以记住基本概念。问题是，当我开始学习如何定义控制器时，我感到困惑

这就是如何在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; };
});

---

我不明白这两者之间的区别。有人能给我解释一下吗？或者它只是来自angular的不同版本的代码，而第二个代码是正确的？

它们都工作并做相同的事情。第一个更为详细，因为它在将依赖项作为参数列在函数中之前显示了数组中的依赖项。根据谷歌的标准，前者是首选。

它们都工作，做同样的事情。第一个更为详细，因为它在将依赖项作为参数列在函数中之前显示了数组中的依赖项。根据谷歌的标准，前者是首选的。

不同的是，当您缩小javascript文件时，第二个可能不起作用。这就是为什么第一种方法更受欢迎

假设您缩小了一个文件

第一种方法：

app.controller('MainController', ['$scope',function(a){

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

第二种方法：

app.controller('MainController', ['$scope',function(a){

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

---

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

不同的是，当您缩小了javascript文件时，第二种方法可能不起作用。这就是为什么第一种方法更受欢迎

假设您缩小了一个文件

第一种方法：

app.controller('MainController', ['$scope',function(a){

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

第二种方法：

app.controller('MainController', ['$scope',function(a){

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

---

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

第一种方法是首选方法。这是因为如果您使用第二种方法，然后将其缩小，则

$scope

变量（以及任何其他依赖项）将失去其意义。因此，将依赖项作为一个数组（第一种方式）可以使代码在缩小时正常工作

---

查看此答案了解更多信息：

第一种方法是首选方法。这是因为如果您使用第二种方法，然后将其缩小，则

$scope

变量（以及任何其他依赖项）将失去其意义。因此，将依赖项作为一个数组（第一种方式）可以使代码在缩小时正常工作

---

查看此答案了解更多信息：

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

区别在于，第一个示例在调用

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正在分析参数的确切名称。当它看到名为“$scope”的参数时，它知道如何向该参数添加正确的$scope信息。当一个缩微器将其更改为其他内容时，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";
}]);

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

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";
}]);

迷你程序不会更改字符串的名称

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

TL；DR

---

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

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

区别在于，第一个示例在调用

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正在分析参数的确切名称。当它看到名为“$scope”的参数时，它知道如何向该参数添加正确的$scope信息。当一个缩微器将其更改为其他内容时，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";
}]);

缩小后,，