AngularJS ASP.NET C# Ionic Framework JavaScript TypeScript

Angular and TypeScript Decorators for object-oriented front-end applications

I’ve taken up TypeScript over the last few months, and it is such a breath of fresh air. TypeScript has quickly become one of my favorite languages to develop in, especially on the front-end. One of my favorite features is TypeScript Decorators, and I’ve been taking advantage of them to trim down my AngularJS code and enable me to create small components with limited overhead. I have published some of these decorators to my NPM package “angular-future”, which you can view the source for on GitHub.

Decorators

Decorators are similar in syntax to Java annotations and C# attributes. For example:

@Component({
    name: "home",
    template: `{{$ctrl.message}}`
})
@State({
    url: "/",
    params: {}
})
export class LoginPage {
    public message: string = "Hello world!";
    
    public constructor(
        @Inject("$http") private _httpService: ng.IHttpService
    ) {
    }
}

These three decorators do a lot when working with my @Module decorator. It turns this simple class into a component registered in Angular and also configures a State for Angular UI Router, all right next to the component itself. The @Inject attribute manages the static $inject property Angular needs for injection post-minification. These decorators speed up development because no longer will you run into issues like mistyping the component name in the State, or forgetting to add a value to $inject (or putting them out of order!). In addition, we now have a nice class-based component without any of the overhead like registering the component to the app module by hand or referencing an external template file (sidenote, there are HTML syntax highlighting extensions for VS Code that make editing the template string in-code fantastic!).

I have also created a decorator to initialize the model in an object-oriented fashion:

@Module({
    name: "app",
    imports: ["ui.router"],
    declarations: [
        LoginPage
    ],
    bootstrap: LoginPage
})
class MyModule {
    @Config()
    public config(
        @Inject("$provide") provide: any
    ) {
        // Config!
    } 

    @Value("baseUrl")
    public baseUrl(): string {
        return "http://myserver/api/";
    }
}

This decorator takes obvious inspiration from the Angular2 NgModule. This allows developers to quickly see all of the components, services, and controllers registered to the Angular application via class reference. It also allows all of your app configuration to be added to a single location, simplifying the code organization.

I have been using this architecture and design for my latest Angular and Ionic Framework projects and couldn’t be happier. Prior to these decorators, TypeScript and Angular was great. However, there were a lot of hang-ups due to type-safety and module references. These decorators eliminate all of the pain points I was dealing with. Now, TypeScript and Angular are amazing. With this limited overhead, creating small, React-style components is a breeze!

Check out my demo for a bigger example of how to use angular-future to improve your code quality and let me know what you think!

Leave a Reply

Your email address will not be published. Required fields are marked *