javascript - What is the proper way to load dependencies in a controller super class of an AngularJS application? -
i building angularjs application provides basic crud features. app built using typescript take advantage of types , classes. have base of operations controller needs access several angularjs dependencies. originally, injected dependencies follows
file: 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
class workrequestlistcontroller extends basecontroller { /* write code override base of operations controller or implement local methods */ } angular.module('app.workrequests') .controller('workrequestlistcontroller', ['$location', '$routeparams', ($location, $routeparams) => new workrequestlistcontroller($location, $routeparams) ]); this solution works, requires subclass aware of dependencies required base of operations class. if ever need dependency in base of operations class, have alter every subclass , statement instantiates controller. prepare these issues, pass $injector base of operations class follows:
file: 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
class workrequestlistcontroller extends basecontroller { /* write code override base of operations controller or implement local methods */ } angular.module('app.workrequests') .controller('workrequestlistcontroller', ['$injector', ($injector) => new workrequestlistcontroller($injector) ]); here's question: right way load dependencies in super class without forcing subclass or other code aware of dependencies?
there's simple way implement base of operations controller using $controller service. wrote blog post recently, here's code snippet showing how works:
'use strict'; angular.module('diary') // base of operations controller containing mutual functions add/edit controllers .controller('diary.baseaddeditcontroller', ['$scope', 'diaryservice', function ($scope, diaryservice) { $scope.diaryentry = {}; $scope.savediaryentry = function () { diaryservice.savediaryentry($scope.diaryentry); }; // add together other shared functionality here. }]) .controller('diary.adddiarycontroller', ['$scope', '$controller', function ($scope, $controller) { // instantiate base of operations controller $controller('diary.baseaddeditcontroller', { $scope: $scope }); }]) .controller('diary.editdiarycontroller', ['$scope', '$routeparams', 'diaryservice', '$controller', function ($scope, $routeparams, diaryservice, $controller) { // instantiate base of operations controller $controller('diary.baseaddeditcontroller', { $scope: $scope }); diaryservice.getdiaryentry($routeparams.id).success(function (data) { $scope.diaryentry = data; }); }]); javascript angularjs typescript
No comments:
Post a Comment