I’ve been using TypeScript and Angular for a while now, if you haven’t noticed already by the latest storys in here. A while ago I wrote about creating Controllers and Services as classes in your project and how you might benefit from all the good features of TypeScript by doing so.

Today I want to write about some new related discoveries I’ve made lately.

Let me ask you one question first, do you think it is very annoying to have to add controllers and services to angular one by one by doing:

app.controller("ControllerName", ["dep1", function(dep1) {
    // use dep1 in the controller here
}]);

This usually lives in the file that declares the controller, it is not a bad thing if you only use JavaScript of course, or I should say it is the only way.

But,

Wouldn’t it be awesome if we could separate the angular part, from the controller/service part? Let me explain.

In my previous story about Angular I showed how to create your controllers and services as classes, so we know that we can actually put those classes in their own files. Now it is even better when you use modules/namespaces to organize them all, they will all be inside the same JavaScript object in the compiled code.

Why is this even better then?

Well easy, because we can tell Angular to add them all at once with ONE SINGLE line of code. Let’s assume we have several controllers and services created as classes like this one inside its own file:

module MyApp.Controllers {
    export class FirstController {
        static $inject = ["FirstService"];
        constructor(private firstService: MyApp.Services.IFirstService) {
        }
    }
}

and a second controller in a different file:

module MyApp.Controllers {
    export class SecondController {
        static $inject = ["FirstService"];
        constructor(private firstService: MyApp.Services.IFirstService) {
        }
    }
}

and in a separate file a service:

module MyApp.Services {
    export interface IFirstService {
    }
    export class FirstService implements IFirstService {
        static $inject = ["$window"];
        constructor(private $window: angular.IWindowService) {
        }
    }
}

well, normally we would add the app.controller() and app.service() statements to the bottom of each of the files, but TypeScript allows you to do it like this:

angular.module("MyApp")
    .controller(MyApp.Controllers)
    .service(MyApp.Services);

Trust me, this works, and it is awesome.

Yes, all controllers, and all services will be created, in one single call.

For real.

Seriously.

You believe me already?

Now instead of having a bunch of angular statements all over the place, you only have them all together in a single file somewhere in the root of the project. And what’s best, your services (controllers might not apply that well to this) are only services, they do have their dependencies injected the Angular way, but who cares, the rest of the class is just that, a class. No scope, no window.angular references anywhere.

Just classes.

I will let it sink, and Thanks for reading again.