Angular Factories with TypeScript

To make our code as easy to maintain as possible, we keep all data interactions in modules called Factories. Most of our factory files have about 10 or 12 callback functions and we try to keep them pretty simple. Moving them to typescript wasn’t very intuitive at first, but once we figured it out, it is a no-brainer.

Here’s a basic sample that we used to get a list of offices from the api server. You can add as many functions as you want. This one just has one.

module Application.Services {

    export interface IMyService {
        GetOffices(successCallback: Function);
    }

    export class MyService {

        http: ng.IHttpService;
        location: ng.ILocationService;

        constructor($http: ng.IHttpService, $location: ng.ILocationService) {
            this.http = $http;
            this.location = $location;
        }

        GetOffices(successCallback: Function) {     
            this.http.get(apiServer + "/api/Office?sid=" + session_id).success((data, status) => {
                successCallback(data,status);
            }).error(error => {
                successCallback(error,"ERROR");
            });
        }
    }
}

app.factory("adminFact", ["$http", "$location", ($http, $location) => new Application.Services.MyService($http, $location)]);

so, here’s how it works: you’ve got your normal factor, but you replace the entire “function” section with a typescript lambda. (slick).
Normally, you’d have something like this:

app.factory('reportFact', function ($http, $q) {
    return {  
        Offices: function () {
            return $http.get(apiServer + "/api/Office?sid=" + session_id);
        }
   };
});
 

So you can see, the factory is returning a function, which you can then run to get your data. With TypeScript, you’re going to make that function ahead of time in a module. (note: We’ve just called this one Application.Services. You can call it FooBar.MyService if you want. Doesn’t matter.)

Ok, so the first thing you’re going to need is the Interface. This is what makes TypeScript understand your object and check it for you as well as provide intellisense.

  export interface IMyService {
        GetOffices(successCallback: Function);
    }

So… any functions you want to have access to, just list them in there.

Then you’ve got to export your class

export class MyService {

You’ll want to define the typs of objects you’re expecting to get in the constructor so you can use them in the rest of the module.

       http: ng.IHttpService;
       location: ng.ILocationService;

Then you’ve got the constructor, that “makes” the object.

  constructor($http: ng.IHttpService, $location: ng.ILocationService) {
            this.http = $http;
            this.location = $location;
        }

Remember, these have to match your creating statement for the factory:

app.factory("adminFact", ["$http", "$location", ($http, $location) => new Application.Services.MyService($http, $location)]);

finally, you’ve got your functions. You can have as many as you want.

  GetOffices(successCallback: Function) {     
            this.http.get(apiServer + "/api/Office?sid=" + session_id).success((data, status) => {
                successCallback(data,status);
            }).error(error => {
                successCallback(error,"ERROR");
            });
        }

Pretty cool, huh?

(note, I have some horrible global variables that are a carry-over from way way back (apiServer and session_id). some day we’ll get them in there properly, but for this particular system, it’s just easy.)

[disqus]