Angular Directives using TypeScript

Below is a mechanism to create typed Angular directives using TypeScript.

The main thing is that our directive class needs to implement ng.IDirective. After that we can have the corresponding ng.IDirective members. The advantage here is that we don't need to memorize or google for what are the members required for directive. Its all there in ng.IDirective

Above code snippet is taken directly from my personal web site. The members such as bindToController, controller etc... are optional. This is not enough to get the ProjectsDirective available in our application. For that we have to register it with Angular application.

It gets the instance of the Angular module and calls the registerDirective function. The object here is a wrapper over real Angular module object. That function in turn calls the real Angular.directive function.

Dependency injection

The dependencies to the directive can be accepted by the directive factory / creation function. That function then can pass those injected objects to the directive constructor.