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）为了让它变得更好，我们可以这样做。请注意，该函数现在位于具有依赖项的列表中。这种依赖关系的“双重”命名有助于角度跟踪缩小代码中的事物。

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的minifier，它实际上破坏了方法名称（我猜我必须更换它）

您的应用可能会突破。

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

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不会知道您需要$scope。

如果缩小对您无关紧要，您可以使用其中任何一个，因为问题实际上只是分解为可维护性和可读性。此外，如果您有多个带控制器的模块，第二个模块不会让您遇到麻烦。

Answer 3

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

以下是我从

中找到的内容

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.

Answer 4

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

从创建AngularJS控制器的两种方法应该使用，为什么？

4 个答案: