Angular 1.x vs Angular 2.0

What's New in Angular 2.0?

Presented by Mohammad Doleh & Ryan Wittibschlager

Angular 2.0 Features

Speed and Performance

  • Code Generation
    • Templates converted into optimized JavaScript
  • Server-side Rendering
  • Code Splitting
    • Only the required code for a view is loaded

Productivity

  • TypeScript allows for IDE support
  • Improved template syntax
  • Command line tools

Full Development Story

  • Testing
  • Easy Animations
  • ARIA Enabled Components

Angular 2 Goals

Improved Binding

  • Zones
    • No longer need to think about the digest cycle
    • No more $scope.$digest() or $scope.$apply()
    • No more wrapping code in $timeout
    • Lifecycle Hooks
      • ngAfterContentInit
      • ngAfterContentChecked
      • ngAfterViewInit
      • ngAfterViewChecked

Improved Performance

  • Faster Single Binding Change Detection
    • No longer scans a tree of objects
    • Changes produce a clear path in the tree to the changed component
      • Possible through the use of Observable and Immutable models

Improved Modularity

  • Lazy Loading
    • Only modules that are needed are loaded asynchronously
    • Can even make use of the ES6 module loader or any other loader of your choice

Improved Dependency Injection

  • Angular 1
    • Global pool of objects
    • Silently overwrites existing objects if they have the same name
    • Multiple dependency injection mechanisms (linking functions, directives, controllers)
  • Angular 2
    • Injection by Type instead of by name
    • Hierarchical - child component looks up parent's implementation as needed

Web Component Friendly

  • Support is Built-In
    • @Component({
  templateUrl: 'zippy.html',
  styles: [`
    .zippy {
      background: green;
    }
  `],
  encapsulation: ViewEncapsulation.Native
})

Server Side Rendering

  • Improved SEO
  • Improved User Experience

Improved Testability

  • Separated the rendering layer
  • Code requires no DOM to be tested

Code

Interpolation

Angular 1.x Angular 2.0 
Your favorite hero is: {{vm.favoriteHero}}
 
Your favorite hero is: {{favoriteHero}}

Filters vs. Pipes

Angular 1.x Angular 2.0 
{{movie.title | uppercase}}
 
{{movie.title | uppercase}}

ng-repeat vs. *ngFor

Angular 1.x Angular 2.0 

									
									<tr ng-repeat="movie in vm.movies">
  <td>{{movie.title}}</td>
</tr>
									
									

									
									<tr *ngFor="let movie of movies">
  <td>{{movie.title}}</td>
</tr>

ng-app vs. Bootstrap

Angular 1.x Angular 2.0 
<body ng-app="movieHunter">
 
import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

ng-class vs. [ngClass]

Angular 1.x Angular 2.0 
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive, 
                   shazam: isImportant}">
 
<div [ngClass]="{active: isActive}">
<div [ngClass]="{active: isActive,
                 shazam: isImportant}">
<div [class.active]="isActive">

ng-click vs. (click)

Angular 1.x Angular 2.0 
<button ng-click="vm.toggleImage()">
<button ng-click="vm.toggleImage($event)">

<button (click)="toggleImage()">
<button (click)="toggleImage($event)">

Controllers vs. Components

Angular 1.x Angular 2.0 
myApp.controller('GreetingController', 
['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);
 
@Component({
  selector: 'movie-list',
  templateUrl:'app/movie-list.component.html',
  styleUrls: ['app/movie-list.component.css'],
  pipes: [StringSafeDatePipe],
  providers: [SerializerService],
  directives: [FORM_DIRECTIVES]
})
export class MovieListComponent {
  this.greeting = 'Hola!';
}

ng-if vs. *ngIf

Angular 1.x Angular 2.0 
<table ng-if="movies.length">

<table *ngIf="movies.length">

ng-model vs. ngModel

Angular 1.x Angular 2.0 
<input ng-model="vm.favoriteHero"/>

<input [(ngModel)]="favoriteHero" />

Pipes in Angular 2.0

Angular 1.x Angular 2.0
  • currency
  • date
  • filter
  • json
  • limitTo
  • lowercase
  • number
  • orderBy
  • currency
  • date
  • -
  • json
  • slice
  • lowercase
  • number
  • -
  • Missing pipes in Angular 2.0 are due to performance reasons

Components in Angular 2.0

  • No longer has its own module system
  • Instead utilizes ES2015 modules or the module loader of your choice
  • Required code is imported as needed

Component Class

  • Behavior is defined in classes rather than functions
  • Information like dependencies to inject, or templates to load is handled in the @Component decorator
  • Massively simplifies unit testing

Unit Testing

Angular 1.x

  • beforeEach(module('myApp'))
  • inject(function(_$controller_, ...)...
  • $controller('PasswordController', { $scope: $scope })
  • $filter('length')
  • $provide.value('myService', myMockedService)
  • var scope = $rootScope.$new();
var element = $compile("<div my-directive></div>")(scope);
scope.$digest();

Angular 2.0

  • import {BacService} from '../src/BacService';
											
beforeEach(() => {
	mockSerializer = jasmine.createSpyObj("SerializerService", ["getData", "storeData"]);
    bacService = new BacService(mockSerializer);
  });