Question

这是一个关于AngularJS的新手问题。简短的问题是，我在AngularJS中看到了4种指定控制器的方法。第一个不适用于AngularJS 1.4.8，而其他三个效果很好。

第一种款式是否过时了？如果我们现在需要使用新款式，那么第二款和第三款之间有什么区别？那个没有使用$scope的第四个怎么样？是推荐吗？

这是第一个不起作用的人:(摘自2014年12月Apress的Beginning AngularJS一书）

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../js/angular.min.js"></script>
    <script>
    function MyFirstCtrl($scope) {
        var employees = ['Catherine Grant', 'Monica Grant',
        'Christopher Grant', 'Jennifer Grant'
    ];
    $scope.ourEmployees = employees;
}
</script>
</head>
<body ng-controller='MyFirstCtrl'>
    <h2>Number of Employees: {{ ourEmployees.length }}</h2>
</body>
</html>

这第二个有效：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="../js/angular.min.js"></script>

    <script>

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

    myApp.controller('MyFirstCtrl', ['$scope', function($scope) {

        var employees = ['Catherine Grant', 'Monica Grant',
        'Christopher Grant', 'Jennifer Grant'];

        $scope.ourEmployees = employees;

    }]);

    </script>

</head>

<body ng-controller='MyFirstCtrl'>

    <h2>Number of Employees: {{ ourEmployees.length }}</h2>

</body>
</html>

第三个也有效，而且只是第二个，但取代了以上几行：

myApp.controller('MyFirstCtrl', function($scope) {

    var employees = ['Catherine Grant', 'Monica Grant',
    'Christopher Grant', 'Jennifer Grant'];

    $scope.ourEmployees = employees;

});

第4种方式不使用$scope，但在this行使用main和ng-controller：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="../js/angular.min.js"></script>

    <script>

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

    myApp.controller('MyFirstCtrl', function() {

        var employees = ['Catherine Grant', 'Monica Grant',
        'Christopher Grant', 'Jennifer Grant'];

        this.ourEmployees = employees;

    });

    </script>

</head>

<body ng-controller='MyFirstCtrl as main'>

    <h2>Number of Employees: {{ main.ourEmployees.length }}</h2>

</body>
</html>

Answer 1

如果第一个不适用于Angular 1.4.8，那么它的定义是过时的。

第二种是“正确的”方式 - 通过显式枚举注入的变量（$scope），它允许minifiers重命名控制器的形式参数。

第三种方式取决于Angular能够读取函数的源并自动确定注入的变量。它很脆弱，建议使用Angular文档（https://docs.angularjs.org/guide/di）

Answer 2

除了第一个看起来不完整的控制器之外，声明你提到的控制器的方式都是有效的。然而，正如Alnitak指出的那样，第三种方法是缺少显式依赖注入，这可以通过使用ng-annotate来解决。这很有用，因为您不必担心显式注释，但我习惯于手动执行注入。

缩小需要显式依赖注入，即当角度代码被修改时，所有变量都会被更改，例如：

myApp.controller('MyFirstCtrl', function($scope) {
    /**/
});

会变成：

m.controller('MyFirstCtrl', function(g) {/**/});

和angular不知道g是什么。通过使用显式注入指定它，Angular知道g实际上是$scope。

还有另一种方法可以声明一个控制器，它与第二个选项基本相同：

var myApp = angular.module('app',[]);
MyFirstCtrl.$inject = ['$scope'];
myApp.controller('MyFirstCtrl', MyFirstCtrl);
function MyFirstCtrl($scope) {/**/}

有些人认为它更具可读性，因为它将注入与控制器定义分开。对我而言，它有助于提高可读性，但这是一个偏好问题。

您可以从John Papa查看相关原因。

在AngularJS中指定控制器的不同方法之间有什么区别？

2 个答案: