1

在大多数演示中，给出了以下方法

第一种方法：

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!";

});

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

4

4 回答 4

3

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

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，我觉得它看起来稍微好一点:)

于 2013-08-27T13:45:55.703 回答
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 不会知道你需要$scope这里。

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

于 2013-08-27T10:06:37.930 回答
1

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

这是我发现的

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.
于 2013-08-27T09:58:21.387 回答
1

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

于 2013-08-27T10:03:14.670 回答