[英]What is the proper way to load dependencies in a controller super class of an AngularJS application?
I am building an AngularJS application that provides basic CRUD features. 我正在构建一个提供基本CRUD功能的AngularJS应用程序。 That app is built using TypeScript to take advantage of types and classes.
该应用程序是使用TypeScript构建的,以利用类型和类。 I have a base controller that needs access to several AngularJS dependencies.
我有一个基本控制器,需要访问几个AngularJS依赖项。 Originally, I injected the dependencies as follows
最初,我将依赖项注入如下
File: base-controller.ts 文件: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 ');
}
}
File: list-controller.ts 文件: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)
]);
This solution works, but requires my subclass to be aware of the dependencies required by my base class. 此解决方案有效,但要求我的子类了解我的基类所需的依赖项。 If I ever need another dependency in my base class, I would have to change every subclass and the statement which instantiates the controller.
如果我在基类中需要其他依赖关系,则必须更改每个子类和实例化控制器的语句。 To fix these issues, I now simply pass $injector into my base class as follows:
为了解决这些问题,我现在只需将$ injector传递给我的基类,如下所示:
File: base-controller.ts 文件:base-controller.ts
class BaseController {
private $location;
private $routeParams;
constructor($injector) {
/* Load dependencies */
this.$location = $injector.get('$location');
this.$routeParams = $injector.get('$routeParams');
}
}
File: list-controller.ts 文件: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)
]);
Here's my question: Is this the correct way to load dependencies in a super class without forcing the subclass or other code to be aware of the dependencies? 这是我的问题:这是在不强制子类或其他代码了解依赖关系的情况下在超类中加载依赖关系的正确方法吗?
Is this the correct way to load dependencies in a super class without forcing the subclass or other code to be aware of the dependencies?
这是在不强制子类或其他代码了解依赖关系的情况下在超类中加载依赖关系的正确方法吗?
This is a way. 这是一种方法。 Angular doesn't recommend inheritance in controllers.
Angular不建议在控制器中继承 。 It prefers composistion .
它更喜欢组合 。 The common functionality should go in a service / factory that gets injected into your controllers.
常用功能应该在注入控制器的服务 / 工厂中进行。
There's actually a really simple way to implement a base controller using the $controller service. 实际上,有一种使用$ controller服务实现基本控制器的非常简单的方法。 I wrote a blog post about it recently, here's the code snippet showing how it works:
我最近写了一篇关于它的博客文章 ,下面的代码片段显示了它的工作方式:
'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;
});
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.