Angular 2: A Component-Based MVC Framework

I would like to start this article by acknowledging the Angular 2 team for coming up with an awesome framework that takes away all the grunt work required for building single page web applications. Not only that, the documentation itself is really solid. All of the information below is what I got away with by going through Angular 2 documentation for few times.

Angular 2 applications can be written using ES6 or even in ES5, but I've found that TypeScript really makes things a lot easier when used with IDE like WebStorm and Visual Studio Code (which have great support for TypeScript). All those auto-completes, compile time errors and warnings, and strong type checking makes you a lot more productive.

As stated in the title itself, Angular 2 is a component based MVC framework. Components are major building blocks of an Angular 2 application...but what is a component? Well, when written using TypeScript, a component is merely a TypeScript class decorated with @Component() decorator.

import {Component} from "@angular/core";
@Component({
selector: 'product',
template: '<p (click)="nextProduct()">{{productName}}</p>'
})
export class ProductComponent{
productName:string = "First Product";
nextProduct(){
this.productName = "Next Product";
}
}

Decorators are actually JavaScript functions which amend the decorated class in some way. Basically, it gives additional meaning to a plain JavaScript class based on the decorator used. From the developers' perspective, we just declaratively decorate a class by passing a mandatory configuration object as a parameter to the decorator function.

Angular 2 also has other key building blocks like modules, directives, pipes, and services. Again, when written using TypeScript, they all are just a TypeScript class merely differentiated by the decorator used. The same plain class above would be an Angular 2 directive when decorated with the @Directive() decorator.

The key idea behind developing an Angular 2 application is coming up with components and composing them together as required to build an application. A component is an independent cohesive block of code which has the required logic, view, and data as one unit. In the above example ProductComponent, the template represents the view, and the method nextProduct() is the logic that controls the view of this component and productName property is the Model. That’s MVC within the component itself.

Components are a really neat idea. Each component class being an independent unit, it is highly reusable and can be maintained without messing up with other components. Scaling is as easy as adding more components to your existing application. Building SPA using Angular 2 components is like building a house using lego blocks. Just add more lego blocks to make your building bigger.

In real world application development, components might be too granular for reusability. Usually, we instead want to organize and reuse codes in some form of package that binds all the related components together. That's where NgModule comes in. Angular 2 has its own module system. An Angular 2 module is composed of all the related components, directives, and pipes. You just need to decorate a plain JavaScript class with @NgModule() decorator and pass a mandatory configuration object. Using properties of the configuration object you tell Angular which components belongs to your module. The module also allows you to specify which components are accessible from outside the module, i.e., you can give controlled access to your module.

Earlier, when I talked about MVC, controller represented the methods within a component class. Logic of these methods are totally dedicated to controlling the view of that component. But, there might be other logics which is more general. It might be something application wide e.g. getting data from the server. We obviously don’t want to repeat those application wide logic in every single component. It makes sense to pull them into separate service class and dependency inject them for the component requiring them. That’s where services and the Angular 2 dependency injection come in. In Angular 2, a service class is just a plain JavaScript class, without any decorator. More than that, almost anything (value, function, object) can be a service in Angular 2.

Angular 2 framework consists of several libraries, some core and other optional. Many of those libraries are modules (i.e., FormModule, HttpModule, and RouterModule).

All in all, Angular 2 is a powerful framework. Give it a try. As I stated earlier, the Angular 2 team also did a great job in documentation.