在AngularJS應用程序的控制器超類中加載依賴項的正確方法是什么？

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不建議在控制器中繼承 。 它更喜歡組合 。 常用功能應該在注入控制器的服務 / 工廠中進行。

Answer 2

實際上，有一種使用$ controller服務實現基本控制器的非常簡單的方法。 我最近寫了一篇關於它的博客文章 ，下面的代碼片段顯示了它的工作方式：

'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;
        });
    }]);