In this post we are going to talk about the syntax difference between Angular 1.* and Angular 2.0. You can use this blog as a cheatsheet when upgrading your app to Angular 2.0

Controllers to Components

They removed controllers in Angular 2 and replace it with components which I think is pretty awesome, let's have a look at the following syntax.

<body ng-controller="SimpleController as vm"> <h3>{{vm.saySomething}}</h3> </body> (function(){ angular .module('app') .controller("SimpleController", SimpleController) function SimpleController() { var vm = this; vm.saySomething = function() { return 'something'; } } })();

(Angular 1)

import { Component } from 'angular2/core'; @Component({ selector: 'store-name' template: '<h2>{{store.name}}</h2>' }) export class SimpleController { store = { name: 'howdy' } }

(Angular 2)

As far as I am concern, thinking Angular 2 syntax is much elegant and easy to understand.

Bootstraping

<html ng-app="app">

(Angular 1)

import { bootstrap } from 'angular2/platform/browser' import { AppComponent } from './app.component bootstrap(AppComponent)

(Angular 2)

Built-in Directives

<ul> <li ng-repeat="store in vm.stores"> {{store.name}} </li> </ul> <div ng-if="vm.stores.length"> <h3>You have {{vm.stores.length}} stores.</h3> </div>

(Angular 1)

<ul> <li *ngFor="#store of stores"> {{store.name}} </li> </ul> <div *ngIf="stores.length"> <h3>You have {{stores.length}} stores.</h3> </div>

(Angular 2)

Data Binding

Within Angular, there are 4 ways of data binding, including Interpolation, One way binding, Event Binding and Two way binding.

Interpolation

<h3>{{vm.store.name}}</h3>

(Angular 1)

<h3>{{store.name}}</h3>

(Angular 2)

One Way Binding

<h3 ng-bind="vm.store.name"></h3>

(Angular 1)

<h3 [innerText]="store.name"></h3> <div [store.color]="color">{{store.name}}</div>

(Angular 2)

Event Binding

<button ng-click="vm.log('click')" ng-blur="vm.log('blur')">Ok</button>

(Angular 1)

<button (click)="vm.log('click')" (blur)="vm.log('blur')">Ok</button>

(Angular 2)

Two Way Binding

<input ng-model="vm.store.name">

(Angular 1)

<input [(ngModel)]="store.name">

(Angular 2)

Services & Dependencies Injection

In Angular 2, they remove a lot of unnecessary services like Factories , Services , Providers , Constants and Values, they are gone in Angular 2 and replaced by Class .

Let's see how can we create a service.

angular .module('app') .service('StoreService', StoreService) function StoreService() { this.getStores = function() { return [ { id: 1, name: 'Store 1'}, { id: 2, name: 'Store 2'}, { id: 3, name: 'Store 3'} ] } }

(Angular 1)

import { Injectable } from 'angular2/core'; @Injectable() export class StoreService { getStores = () => [ { id: 1, name: 'Store 1'}, { id: 2, name: 'Store 2'}, { id: 3, name: 'Store 3'} ] }

(Angular 2)

Registering Services with the injector

angular .module('app') .service('StoreService', StoreService)

(Angular 1)

import { Component } from 'angular2/core'; import { StoreService } from './store.service'; @Component({ selector: 'my-store', templateUrl: 'app/store.component.html', providers: [StoreService] }) export class StoreComponent { constructor( private _storeService: StoreService ){ } stores = this._storeService.getStores(); }

(Angular 2)

Dependency Injection

angular .module('app') .controller('StoreController', StoreController); StoreController.$inject = ['StoreService']; function StoreController(StoreService) { var vm = this; vm.title = "Store"; vm.stores = StoreService.getStores(); }

(Angular 1)

import { Component } from 'angular2/core'; import { StoreService } from './store.service'; @Component({ selector: 'my-store', templateUrl: 'app/store.component.html', providers: [StoreService] // dependency injection }) export class StoreComponent { // dependency injection constructor( private _storeService: StoreService ){ } stores = this._storeService.getStores(); }

(Angular 2)

End

Hope this could help you out when you are trying to migrate from Angular 1 to Angular 2. As always if you have any opinions please leave a comment below. Thanks.