current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have an app 

/// <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]);

and a controller 

/// <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;
    }
}}

and a service

/// <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;
    }
}}

and these script declarations in my 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>

When I run this app the controller never receives its dependency on testSvc.getData() because testSvc is undefined. Where am I going wrong?

share|improve this question

2 Answers 2

up vote 3 down vote accepted

A factory must return a service factory function, but you are returning the Service class without instantiating it. You need to change your code to create an instance that passes in the $http and the url, like this:

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

Also just a note, but you haven't specified the return type of getData() as IData so this will create a warning. getData() : IData

share|improve this answer
    
Thank you, thank you. I was following a ts-ng template I found on GitHub here (github.com/santialbo/AngularJS-TypeScript-Project-Template) and the application has a register service function which registered the service with services.push(() => new app.services[className]()); That works if the service has no dependencies but I don't thinks many do. I couldn't figure what was wrong. Also thanks for the type correction. I just can't get used to TypeScript having types after the variable or function rather than before. –  pthalacker Feb 15 '14 at 21:47
up vote 2 down vote

You could just leave your testSvc class the same, and use a service(class) instead of a factory(fn). A service registers your constructor function, so you don't have to new it and provide your injected services in three different places.

angular.module('testApp').service('testSvc', testApp.testSvc);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.