2014-06-22 45 views
5

Temel CRUD özelliklerini sağlayan bir AngularJS uygulaması yapıyorum. Bu uygulama, tür ve sınıflardan yararlanmak için TypeScript kullanılarak oluşturulmuştur. Birkaç AngularJS bağımlılığına erişim gerektiren bir temel denetleyicim var. Baz-controller.tsBağımlılıkları AngularJS uygulamasının bir denetleyici süper sınıfına yüklemek için uygun yol nedir?

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

Dosya: Başlangıçta,

Dosya aşağıdaki gibi bağımlılıklar enjekte liste 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) 
]); 

Bu çözüm çalışır ancak gerektirir benim alt sınıfım, temel sınıfımın gerektirdiği bağımlılıkların farkında olmalıdır. Benim temel sınıfımda başka bir bağımlılığa ihtiyacım olursa, her bir alt sınıfı ve denetleyiciyi başlatan ifadeyi değiştirmek zorunda kalırdım.

Dosya: Bu sorunları gidermek için, aşağıdaki gibi, şimdi sadece benim temel sınıf içine $ enjektör geçmesine baz controller.ts

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

Dosya: 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) 
]); 

İşte sorum şu: Bu bağımlılığın farkında olmak için alt sınıfı veya diğer kodu zorlamadan bağımlılıkların bir süper sınıfa yüklenmesinin doğru yolu mu?

cevap

2

bu bağımlılıkları farkında olmak alt sınıf veya başka bir kod zorlamadan süper sınıfta bağımlılıkları yüklemek için doğru yolu var mı?

Bu bir yoldur. Angular, kontrol cihazlarında devralmayı önermez. kompozisyonunu tercih eder. Ortak işlevsellik, denetleyicilerinize enjekte edilen servis/fabrika ürününe gitmelidir.

+0

Biz denetleyicileri için miras seçti hepimizin kontrolörleri uygulamak istediğiniz baz davranışı var ve biz kolay bir yol geçersiz veya uzatmak istiyorum çünkü belirli denetleyicilerdeki işlevsellik. API çağrılarımızı, bileşen direktiflerini ve birkaç filtreyi paketlemek için hizmetler kullanıyoruz. –

+0

Burada * önerilen * desen yok. Ama projelerimde yaptığınız gibi aynısını yaptım (web servisleri için) – basarat

2

$ Denetleyici hizmetini kullanarak bir temel denetleyiciyi gerçekte uygulamak gerçekten basit bir yol var. Burada kod parçacığı nasıl çalıştığını gösteriyor, son zamanlarda bu konuda blog post yazdı:

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