2014-02-15 5 views
1

У меня есть приложение Машинопись Угловая Dependency Injection Отказ

/// <reference path="../Scripts/angular.d.ts" /> 
/// <reference path="testCtrl.ts" /> 
/// <reference path="testSvc.ts" /> 
angular.module('testApp', []); 
angular.module('testApp').constant('url','http://whatever'); 
angular.module('testApp').factory(
'testSvc', ['$http', 'url', testApp.testSvc]); 
angular.module('testApp').controller(
'testCtrl', ['testSvc', testApp.testCtrl]); 

и контроллер

/// <reference path="../Scripts/angular.d.ts" /> 
/// <reference path="testSvc.ts" /> 
module testApp{ 
export class testCtrl { 
    public someText:string; 
    public httpData:any; 
    public urlName:string; 
    private data:IData; 

    static $inject = ['testSvc']; 

    constructor(testSvc) { 
     this.someText = 'I am in scope' 
     this.data = testSvc.getData(); 
     this.httpData = { 
      putFunc: this.data.putFunc, 
      expectPUTFunc: this.data.expectPUTFunc 
     } 
     this.urlName = this.data.urlName; 
    } 
}} 

и услуги

/// <reference path="../Scripts/angular.d.ts" /> 
/// <reference path="testCtrl.ts" /> 
interface IData{ 
urlName:string; 
putFunc:string; 
expectPUTFunc:string; 
} 
module testApp{ 
export class testSvc { 
    public data:IData; 



    static $inject = ['$http', 'url']; 

    constructor(private $http, url) { 
     this.data = { 
      urlName:url, 
      putFunc: typeof $http.put, 
      expectPUTFunc: typeof $http.expectPUT 
     } 
    } 

    getData(){ 
     return this.data; 
    } 
}} 

и эти объявления сценариев в моем HTML

<script type="text/javascript" src="../Scripts/angular.js"></script> 
<script src="testSvc.js"></script> 
<script src="testCtrl.js"></script> 
<script src="testApp.js"></script> 

Когда я запускаю это приложение не контроллер никогда не получает свою зависимость от testSvc.getData(), потому что testSvc не определено. Где я иду не так?

+0

Почему вы накладываете свои собственные модули поверх Углового? Какую пользу вы получите от этого дополнительного уровня сложности, дополнительного глобального состояния и семантического дублирования ?. – yangmillstheory

ответ

3

Завод должен вернуть функцию фабрики услуг, но вы возвращаете класс Service без его экземпляра. Вы должны изменить свой код, чтобы создать экземпляр, который проходит в $http и url, как это:

angular.module('testApp').factory('testSvc', 
    ['$http', 'url', ($http, url) => new testApp.testSvc($http, url)]); 

Также просто к сведению, но вы не указали тип возвращаемого getData() в IData так этого создаст предупреждение. getData() : IData

+0

Спасибо, спасибо. Я следил за шаблоном ts-ng, который я нашел здесь в GitHub (https://github.com/santialbo/AngularJS-TypeScript-Project-Template), и приложение имеет функцию регистрации регистра, которая зарегистрировала услугу с помощью services.push (() => new app.services [className]()); Это работает, если у службы нет зависимостей, но я не думаю, что многие это делают. Я не мог понять, что случилось. Также спасибо за исправление типа. Я просто не могу привыкнуть к TypeScript, имеющему типы после переменной или функции, а не раньше. – pthalacker

2

Вы можете просто оставить свой testSvc класс же, и использовать service(class) вместо factory(fn). Служба регистрирует вашу конструкторскую функцию, поэтому вам не нужно ее вводить и предоставлять свои инъекционные услуги в трех разных местах.

angular.module('testApp').service('testSvc', testApp.testSvc);