从创建AngularJS控制器的两种方法来看，应该使用哪些控制器以及为什么使用

Question

在下面的大多数演示中，方法都给出了

第一种方法：

function MyCtrl( $scope ){
$scope.someValue = "All your base are belong to us!";
}

第二种方法：

app.controller("MyController",funciton( $scope ){
  $scope.someValue = "All your base are belong to us!";
});

使用这两种方法的优缺点是什么？

Answer 1

我将尝试快速总结每个选项的优缺点。

1）以下版本经常用于网络上的示例，因为它很容易编写。不过，出于两个原因，我不建议在实际代码中使用它。首先，如果你缩小你的代码（你应该这样做），它可能会崩溃，其次，你到处都是全局变量，这通常是糟糕的形式，并鼓励难以测试的草率依赖。

function MyCtrl( $scope ){
  $scope.someValue = "All your base are belong to us!";
}

---

2）你写的第二个版本更好。它包含了应用程序上的功能，这很好，但它仍然可以从一些迷你程序中断开。

app.controller("MyController",function( $scope ){
  $scope.someValue = "All your base are belong to us!";
});

---

3）为了让它变得更好，让我们改为这样做。请注意，该函数现在位于一个包含其依赖项的列表中。这种依赖项的"双重"命名有助于angular跟踪缩小代码中的内容。

app.controller("MyController", ['$scope', function( $scope ){
  $scope.someValue = "All your base are belong to us!";
}]);

---

4）您还可以在控制器之后注入依赖项，类似这样。据我所知，这也应该是安全的，不受迷你人的影响（我自己还没有使用过这个版本）。

app.controller("MyController",function( $scope ){
  $scope.someValue = "All your base are belong to us!";
}).$inject = ['$scope'];

---

所以3和4是最好的。它们可以在缩小后幸存下来，并且允许您在编写测试时轻松模拟任何依赖关系。据我所知，3和4之间的区别是表面上的，所以两者应该都一样好。我个人使用3，我认为它看起来稍微好一点：）

Answer 2

我强烈推荐第二个。

这背后的原因是缩小。Angular将尝试通过ng-controller匹配您在模板中调用的控制器名称，例如：

<div ng-controller="Controller">
   <!-- [...] -->
</div>

假设你有一个这样的控制器：

function Controller($scope) {};

然后缩小它（用一些缩小器），你会得到这样的输出：

function c(s) {};

快速编辑：我用uglify检查了它-它会保留你的函数名（你会没事的），我在我的一个项目中使用了一个基于maven的迷你程序，它实际上破坏了方法名（我想我必须替换它）

你的应用程序可能会脱离这一点。

因此，建议使用字符串作为控制器（和注入等）的标识符，如下所示：

var app = angular.module("module", []);
app.controller("Controller", ['$scope', function(scope) {
}]);

这将阻止缩小程序破坏应用程序。像这样注射的原因如下：

var app = angular.module('module',[]);
function Ctrl($scope, $location) {
   $scope.test = 42;
};

将被缩小为（由UglifyJS）：

function Ctrl(a){a.test=2}var app=angular.module("module",[])

Angular将不知道您在这里需要CCD_ 2。

如果缩小对你来说不重要，你可以使用任何一个，因为问题实际上只是分解为可维护性和可读性。此外，如果您有多个带有控制器的模块，第二个模块不会给您带来麻烦。

Answer 3

不同之处在于，第二个版本定义了应用程序空间中的控制器。因此，app.controller调用。不同的是，afaik你只能在ng-app="yourApp"内部使用控制器，而不能在网站上的任何地方使用。

Answer 4

就我个人而言，我更喜欢第二种方法，因为它更容易查看代码，更易于维护，这些只是我的想法。但使用第一种方法，你可以将其作为控制器放在其他应用程序中。

这是我从中发现的

http://www.bennadel.com/blog/2421-Creating-AngularJS-Controllers-With-Instance-Methods.htm

In most AngularJS demos, you will see Controllers being defined as free-standing JavaScript functions:
function MyCtrl( $scope ){
    $scope.someValue = "All your base are belong to us!";
}
These functions are then referenced in the View using the ngController directive:

<div ng-controller="MyCtrl">
    {{ someValue }}
</div>
NOTE: You should never ever abbreviate "Controller" as "Ctrl". I am only doing that here because this it is what you will typically see in a demo. You should try to avoid abbreviations as much as humanly possible when naming things in programming.
The expression used to define the ngController directive is the name of the Controller in your dependency injection (DI) framework. In an AngularJS application, the dependency injection framework is provided directly by AngularJS. This means that, rather than using a free-standing function, we can use the AngularJS controller() method to define our Controllers:

// Define "MyController" for the Dependency Injection framework
// being used by our application.
app.controller(
    "MyController",
    funciton( $scope ){
        $scope.someValue = "All your base are belong to us!";
    }
);
Here, we are defining the controller as an identifier - MyController - and a constructor function. And, once we can do this, we can get much more fine-tuned in how we actually define our constructor function.