Question

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

我发现此示例中的两种方法之间没有太大差异（link to a plunker）：

的index.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>

example.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;
    }
}

Answer 1

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

支持缩小。当您将代码缩小为依赖注入失败时，第二种方法会中断。
JavaScript的良好做法是尽量减少污染全局命名空间和第一个语法帮助。

Answer 2

在您的两种用法中，建议的方法是注入$scope并使用它（而不是使用this，您也可以在第二种方法中使用{。}}。

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

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

Answer 3

通常，在创建应用程序时，需要为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服务的依赖性。

For more detail Read this

app.controller与angular.js中的函数

3 个答案: