Question

我正在构建一个提供基本CRUD功能的AngularJS应用程序。该应用程序是使用TypeScript构建的，以利用类型和类。我有一个基本控制器，需要访问几个AngularJS依赖项。最初，我按如下方式注入了依赖项

文件：base-controller.ts

class BaseController {
    private $location;
    private $routeParams;
    constructor($location, $routeParams) {
        /* Manually inject dependencies */
        this.$location = $injector.get('$location');
        this.$routeParams = $injector.get('$routeParams ');
    }
}

文件：list-controller.ts

class WorkRequestListController extends BaseController {
    /* Write code to override base controller or implement local methods */
}

angular.module('app.workRequests')
    .controller('WorkRequestListController', ['$location', '$routeParams',
        ($location, $routeParams) => new WorkRequestListController($location, $routeParams)
]);

此解决方案有效，但要求我的子类知道我的基类所需的依赖项。如果我在基类中需要另一个依赖项，我将不得不更改每个子类和实例化控制器的语句。为了解决这些问题，我现在只需将$ injector传递给我的基类，如下所示：

文件：base-controller.ts

class BaseController {
    private $location;
    private $routeParams;
    constructor($injector) {
        /* Load dependencies */
        this.$location = $injector.get('$location');
        this.$routeParams = $injector.get('$routeParams');
    }
}

文件：list-controller.ts

class WorkRequestListController extends BaseController {
    /* Write code to override base controller or implement local methods */
}

angular.module('app.workRequests')
    .controller('WorkRequestListController', ['$injector',
        ($injector) => new WorkRequestListController($injector)
]);

以下是我的问题：这是在超类中加载依赖项而不强制子类或其他代码知道依赖项的正确方法吗？

Answer 1

这是在超类中加载依赖项而不强制子类或其他代码知道依赖项的正确方法吗？

这是一种方式。 Angular不建议在控制器中使用继承。它更喜欢 composistion 。常见功能应该放在 service / factory 中，并将其注入控制器。

Answer 2

实际上有一种使用$ controller服务实现基本控制器的非常简单的方法。我最近写了一篇关于它的blog post，这里是代码片段，展示了它是如何工作的：

'use strict';

angular.module('Diary')

// base controller containing common functions for add/edit controllers
.controller('Diary.BaseAddEditController',
    ['$scope', 'DiaryService',
    function ($scope, DiaryService) {
        $scope.diaryEntry = {};

        $scope.saveDiaryEntry = function () {
            DiaryService.SaveDiaryEntry($scope.diaryEntry);
        };

        // add any other shared functionality here.
    }])

.controller('Diary.AddDiaryController',
    ['$scope', '$controller',
    function ($scope, $controller) {
        // instantiate base controller
        $controller('Diary.BaseAddEditController', { $scope: $scope });
    }])

.controller('Diary.EditDiaryController',
    ['$scope', '$routeParams', 'DiaryService', '$controller',
    function ($scope, $routeParams, DiaryService, $controller) {
        // instantiate base controller
        $controller('Diary.BaseAddEditController', { $scope: $scope });

        DiaryService.GetDiaryEntry($routeParams.id).success(function (data) {
            $scope.diaryEntry = data;
        });
    }]);

在AngularJS应用程序的控制器超类中加载依赖项的正确方法是什么？

2 个答案: