Angular 2: A brief history

About a year ago, the Angular team made the decision to drastically change the tremendously popular AngularJS framework. Google and the Angular contributors sought to better the framework by reducing the learning curve and providing performance enhancements. However, these proposed changes were met with much contention by the developer community. To ease concerns, the Angular team sought to explain the benefits more thoroughly at ng-conf 2015. Since then, the Angular team has made quite a bit of progress towards implementing their dream, with 37 alpha releases so far.

What are the differences?

Component-based UI

Angular is adopting a component-based UI, a concept that might be familiar to React developers. In a sense, the Angular 1.x controllers and directives blur into the new Angular 2 Component. This means that in Angular 2 there are no controllers **and **no directives. Instead, a component has a selector which corresponds to the html tag that the component will represent and a @View to specify an HTML template for the component to populate.

The following examples utilize TypeScript, a superset of the ES6 javascript standards. Angular 2 is currently being developed in TypeScript, but will be compatible with both ES5 and ES6 javascript standards.

Angular 1.x:

angular.module(‘example’)
	.controller(‘ExampleCtrl’, function() {
});

Angular 2.0:

import { Component, View } from 'angular2/angular2';

@Component({
  selector: 'example',
})
@View({
  templateUrl: './components/example/example.html',
})
export class Example {}

User Input with the Event Syntax

Angular applications now respond to user input by using the event syntax. The event syntax is denoted by an action surrounded by parenthesis (event). You can also make element references available to other parts of the template as a local variable using the #var syntax.

Angular 1.x:

<input ng-model=”thing.item” type=”text”>
<button ng-click=”thing.submit(item)” type=”submit”>

Angular 2.0:

<input #item type=”text”>
<button (click)=”submit(item)” type=”submit”>

Goodbye $scope

Even though ‘$scope’ has been replaced by “controller as” as a best practice since Angular 1.2, it still lingers in many tutorials. Angular 2 finally kills it off, as properties are bound to components.

Angular 1.x:

angular.module(‘example’)
	.controller(‘ExampleCtrl’, function($scope) {
    		$scope.name = “John Smith”;
});

Angular 2.0:

@Component({
  	selector: 'example'
})

@View({
  templateUrl: './components/example/example.html'
})

export class Example {
	constructor() {
		this.name = “John Smith”;
	}
}

Better Performance

With ultra fast change detection and  immutable data structures, Angular 2 promises to be both faster and more memory efficient. Also, the introduction of uni-directional data flow, popularized by Flux, helps to ease some of the concern in debugging performance issues with an Angular app. This also means no more two-way data binding which was a popular feature in Angular 1.x. Not to worry, even though ng-model is no more, the same concept can be solved in a similar way with Angular 2.

What does this mean for me?

Big changes are on the horizon with Angular 2, making the migration path somewhat unclear. Even so, the direction that the Angular team has taken seems to be bold but positive. In preparation for an upgrade, current applications should keep up to date with the latest 1.x version and consider introducing ES6 or TypeScript.