How to write AngularJS controller using TypeScript?

AngularJS framework has many powerful features, one of them is Controllers. In this post, I’ll tell you how to write AngularJS Controller using TypeScript.

A Controller is used to augment the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller’s function. A new child scope will be created and made available as an injectable parameter to the Controller’s constructor function as $scope.

There are two options to attach controller to the view, one is controller as syntax and the other is using $scope. If controller as syntax is used then the controller instance will be assigned to a property on the new scope.

To get the typed definition, look at this amazing repository for any popular JavaScript library. These definitions allow us to get any compile time errors and good intellisense support in IDE. I use Visual Studio, Visual Code and both supports TypeScript very well.

As mentioned above, AngularJS will create an instance of a controller whenever it is requested. So, a controller can be defined using a class in TypeScript as we know a class can be instantiated. Let us define a Dashboard controller using controller as syntax in the view. The code below doesn’t using $scope service.

To leverage the strong typing feature of TypeScript, it is good to create an interface of all the members and behaviours that will be glued with view. This makes easy to define implementation for a controller and this interface then can be used elsewhere if needed as an abstraction. For this, I’ve created an interface above named IDashboardVm.

The controller named DashboardController then implements this interface and defines the default state for every member. Look at the $inject static member of class which instructs AngularJS DI to inject these dependencies before instantiating current controller. The constructor then defines the arguments in the same order of requested dependencies as when they will be injected in those arguments.

The dependencies mentioned for class is quite straightforward, assume that dataservice is a custom AngularJS service that encapsulates all the HTTP calls to the server. As per the interface definition, we then define implementation for the behaviours that internally calls the dataservice methods. It uses promises to return the response which is then assigned to the controller members to hold that state.

It is really important to notice the position of registering this controller with Angular’s module API. In the code above, first the class is defined and then this registration is done. If the position is swapped, then Angular will not be able to find the implementation of our controller. This works really well when using a JavaScript constructor function as the function hoisting then plays its role.

Below is a code snippet of how this controller can be used using Angular-UI UI-Router but the concept is same if you’d like to use built-in router module in Angular. Note, this just shows the configuration part that uses controllerAs syntax.

If you would like to use $scope service then extend the interface above like code snippet below. This makes sure that all the members that IScope has is available via our interface. Using this will also require some changes in the controller class implementation as now it needs $scope service as dependency. The custom interface type then can be used for $scope parameter in the constructor to get strong typing and intellisense support.

If you would like to learn more about how to integrate AngularJS and TypeScript, refer to my AngularJS posts. If you want to learn something specific then get in touch and I’ll write a post about it.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger