Angular2 A Quick Look

Angular 2 is currently still in development preview, but the main functionality and the core documentation are both already available.
In this post we are going to take a quick look at the design of Angular2 and the key differences bewteen the previous version of Angular.

Design

Mobile

The new Angular version will be focused on the development of mobile apps. The rationale is that it’s easier to handle the desktop aspect of things, once the challenges related to mobile (performance, load time, etc.) have been addressed.

Modular

The changes of framework architecture from MVC to Component Base UI. Various components will be remove as well as the new fast change detection mechanism result in better performance.

ES6 Support

Build-in support for ES6 and takes advantage of good new features such as intuitive syntax, module importing, exporting, annotations, OOP class inheritance etc..

Key Differences

Framework Architecture

Angular2 now take a Component Base UI approach by combine controller and and view into a component this means that there will be no more standalone controller. Look at the difference between Angular1 and Angular2 in the following code snippet.

// Angular1
angular.module('App')
	.controller('TestController', function() {
    	// controller logic
    });

// Angular2
@Component({
	selector: 'App',
    templateUrl: 'index.html'
})
export class TestComponent { }

No more $scope

The only way to get data from controller to view in angular1 is achieve through the used of $scope, but thing are different in angular2 because there will be no more $scope. As replacement this will now be achieve using controller propery instead.

// Angular1
angular.module('App')
	.controller('TestController', function() {
    	$scope.data1 = someData1;
        $scope.data2 = someData2;
    })

// Angular2
@Component({
	selector: 'App',
    templateUrl: 'index.html'
})
export class TestComponent {
	constructor() {
    	this.data1 = someData1;
        this.data2 = someData2;
    }
}

Templating Syntax & Data Binding

The following code snippet is what we used to use to bind data to view, but there is a problem with this. This code snippet will cause a bad http request to be made to try to find the "some.expression" image. Angular resoved this issue by introduce ng-src directive. In angular2 this will instead be resoved with new binding syntax eliminate the need of using directive.

<!-- Angular1 -->
<img src="{{some.expression}}">

<!-- Angular2 -->
<img [src]="some.expression">

We can group all bindings into three categories by the direction in which data flows.

| Data Direction | Syntax | Binding Type | | | | One way from data source to view | {{expression}} | Interpolation | | One way from data source to view | [target]="expression" | Property, Attribute, style, class | | One way view to data source | (target)="expression" | Event | | Two way | [(target)]="expression" | Two way |

Dependency Injection

In Angular 1, we can inject dependencies in multiple places in different ways:

• in the link function by position
• in the directive definition by name
• in the controller function by name, etc.

In Angular 2 this is done through constructor injection.

// Angular1
app.controller('TestController', ['SomeService', function(SomeService) {
    	// logic here
    })

// Angular2
export class TestComponent {
	constructor(someService: SomeService) {}
}

Component Lifecycle Hook

Angular2 provide to hook some code into the component's lifecycle through interface build-in to the core framework.

Here is the complete lifecycle hook interface inventory:

• OnInit
• OnDestroy
• DoCheck
• OnChanges
• AfterContentInit
• AfterContentChecked
• AfterViewInit
• AfterViewChecked

You can apply hook by implement these interfaces into your component class like this.

export class TestComponent implements OnInit {
	ngOnInit() {
    	// initialization code
    }
}

New Routing Mechanism

Because angular2 has combine controller and view into one component the new routing mechanism need to change as well. Lets look at the code snippet to see the different.

// Angular1
app.config(['$routeProvider', function($routeProvider) {
	$routeProvider
    	.when('/some-url', {
        	controller: 'TestController',
            templateUrl: 'some-template.html'
        });
}])

// Angular2
@Component({
	selector: 'App',
    template: `
    	<a [routerLink]=['someUrl']>Some Url</a>
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
	{path: '/some-url', name: 'someUrl', component: TestComponent}
]);
export class AppComponent { }

Here AppComponent act as top level component and we configure our routing by decorate this component with @RouteConfig annotation. We're adding an anchor tag with RouterLink directives. We bind RouterLink to an array containing the string name of a route definition. 'someUrl' is the names of the Routes we configured above.

Conclusion

As Anular2 provide some cool new features and improvement over the prevoius version it's still in the development state, so the migration from angular1 might not happend soon. But it is a good idea to keep an eyes on it so that when the time come we can quickly jump straight into development without any delay.

Last Word

This post is not a guide to learning angular2 but simply a quick look on some of the new features that angular2 provided as well as the difference to the prevoius version.
If you want to learn about angular2 I recommended you checkout the Quick Start Guide and as well as the documentation on angular website.