无法理解Angular JS中的控制器功能

Unable to understand the controller functionality in Angular JS

本文关键字：控制器 功能 JS Angular      更新时间：2024-04-23

我是Angular JS的新手。我试图通过理解控制器的功能来获得一些深入的知识。

我偶然发现了以下代码片段。

var App = angular.module('clientApp', ['ngResource', 'App.filters']);
 App.controller('ClientCtrl', ['$scope',function ($scope) {
   }]);

如果我写，会有什么显著的区别

 var App = angular.module('clientApp', ['ngResource', 'App.filters']);
 App.controller('ClientCtrl', function ($scope) {
   });

我的理解：我确实理解方括号中写的内容是对特定模块或控制器的依赖。然而，我不明白写的原因

          "['$scope',function($scope)"

而不是

   App.controller(controllername,function($scope){
   });

如有任何帮助，我们将不胜感激！

它可以缩小AngularJS代码。AngularJS使用参数名称将值注入控制器函数。在JavaScript缩小过程中，这些参数被重命名为较短的字符串。通过告诉使用字符串数组将哪些参数注入函数，AngularJS仍然可以在重命名参数时注入正确的值。

根据John Papa风格指南，它实际上应该是这样写的：

首先，我们创建并命名一个名为"app"的module。我们还创建了一个名为"SomeController"的controller。

angular
    .module('app')
    .controller('SomeController', SomeController);

现在我们将所需的依赖项注入控制器

SomeController.$inject = ['dataservice', 'logger'];

现在我们为控制器创建相应的函数。注意到依赖关系是如何包含的吗？

function SomeController(dataservice, logger) {
    var vm = this;
    vm.avengers = [];
    activate();
    function activate() {
        return getAvengers().then(function() {
            logger.info('Activated Avengers View');
        });
    }
    function getAvengers() {
        return dataservice.getAvengers()
            .then(function(data) {
                vm.avengers = data;
                return vm.avengers;
            });
    }
}
相关文章：