27

我正在学习 angular.js，想知道什么时候app.controller("MyCtrl",...)应该使用，什么时候function MyCtrl($scope){...}应该使用。

在此示例中，我认为这两种方法之间没有太大区别（指向 plunker 的链接）：

索引.html：

<body ng-app="myApp">

    <div ng-controller="FirstCtrl as app1">
        <button class="btn" ng-model="app1.count"
                            ng-click="app1.increment()">
        Click to increment</button>
        {{ app1.count }}
    </div>

    <div ng-controller="SecondCtrl">
        <button class="btn" ng-model="count"
                            ng-click="increment()">
        Click to increment</button>
        {{ count }}
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    <script type="text/javascript" src="example.js"></script>
</body>

例子.js：

var app = angular.module("myApp", []);

app.controller("FirstCtrl",function () {
    this.count = 0;
    this.increment = function (){
        this.count = this.count + 1;
    }
});

function SecondCtrl($scope){
    $scope.count = 0;
    $scope.increment = function (){
        $scope.count = $scope.count + 1;
    }
}
4

3 回答 3

17

使用基于模块的控制器声明的主要原因是

  • 支持缩小。当您缩小代码时，第二种方法会中断，因为依赖注入失败。
  • JavaScript 的良好做法是尽量减少对全局命名空间的污染，第一个语法帮助在那里。
于 2013-09-20T08:46:00.900 回答
13

在您的两种用法中，推荐的方法是注入$scope并使用它（而不是使用this，您也可以在第二种方法中这样做）。

方法一和方法二的区别在于如何支持缩小。在前者中，您可以提供一组注入参数，而在后者中，您可以修改$inject. 这当然有点技术性，但强烈建议支持缩小。请参阅文档中关于缩小的说明。

前者也没有在全局范围内命名函数，这通常是一件好事！

于 2013-09-20T08:47:12.623 回答
12

通常，当您创建应用程序时，您需要为 Angular 范围设置初始状态。

Angular 将控制器构造函数应用于（在 JavaScript 的 Function#apply 的意义上）一个新的 Angular 范围对象，该对象设置了初始范围状态。这意味着 Angular 永远不会创建控制器类型的实例（通过在控制器构造函数上调用 new 运算符）。构造函数总是应用于现有的范围对象。

您可以通过创建模型属性来设置范围的初始状态。例如：

function GreetingCtrl($scope) {
  $scope.greeting = 'Hola!';
}

GreetingCtrl 控制器创建一个可以在模板中引用的问候模型。

注意：文档中的许多示例显示了在全局范围内创建函数。这仅用于演示目的 - 在实际应用程序中，您应该为您的应用程序使用 Angular 模块的 .controller 方法，如下所示：

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingCtrl', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

另请注意，我们使用数组表示法明确指定控制器对 Angular 提供的 $scope 服务的依赖关系。

有关更多详细信息，请阅读此

于 2013-09-20T08:47:36.017 回答