AngularJS 2.0

Gustavo Andrade

Agenda

• Intro
• Purpose
• Architecture Overview
• Upgrading to Angular 2

        Intro

Purposes

Better mobile support

• Angular 1.x was not built with mobile support in mind
• Angular 2
  • designed to be mobile oriented

Learning path

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>{{ title }}</h1>'
})

export class AppComponent { 
    title = "My First Angular 2 App"
}

Architecture Overview

@Component({
  selector: 'hero-list',
  templateUrl: 'app/hero-list.component.html'
})
export class HeroesComponent { 

  constructor(private _service: HeroService){ }

  heroes:Hero[];
  selectedHero: Hero;

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Upgrading to Angular 2

Approaches

• ng-forward
  • not a real upgrade
  • can use it to create Angular 1 apps that look like Angular 2
• ngUpgrade
  • real upgrade
  • rewrite angular app

Done!

Extra-time!

Component

• Application logic
• What it does to support view
• Interacts with view piece

export class HeroListComponent implements OnInit {
  constructor(private _service: HeroService){ }

  heroes:Hero[];
  selectedHero: Hero;

  ngOnInit(){
    this.heroes = this._service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Template

• Template is a form of HTML to render the Component

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>

<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
  {{hero.name}}
</div>

<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

Metadata

• Metadata tells Angular how to process a class

@Component({
  selector:    'hero-list',
  templateUrl: 'app/hero-list.component.html',
  directives:  [HeroDetailComponent],
  providers:   [HeroService]
})
export class HeroesComponent { ... }

<hero-list></hero-list>

<div>{{hero.name}}</div>
<hero-detail [hero]="selectedHero"></hero-detail>
<div (click)="selectHero(hero)"></div>

Data binding

• Mechanism for coordinating parts of a template with parts of a component
• 3-different forms:
  • Interpolation
     
  • Property binding
     
  • Event binding

<div (click)="selectHero(hero)"></div>

<hero-detail [hero]="selectedHero"></hero-detail>

<div>{{hero.name}}</div>

Service

• Almost anything can be a service
  • tax calculator
  • logging service
  • ...
• A service is typically a class with a narrow, well-defined purpose

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

Service

export class HeroService {
  constructor(
    private _backend: BackendService,
    private _logger: Logger) { }

  private _heroes:Hero[] = [];

  getHeroes() {
    this._backend.getAll(Hero).then( (heroes:Hero[]) => {
      this._logger.log(`Fetched ${heroes.length} heroes.`);
      this._heroes.push(...heroes); // fill cache
    });
    return this._heroes;
  }
}

Directive

• Structural
  • Layout
    • Adding
    • Removing
    • Replacing

• Attribute
  • Appearance or behaviour

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

<div *ngFor="#hero of heroes"></div>
<hero-detail *ngIf="selectedHero"></hero-detail>

Dependency Injection

• Way to supply a new instance of a class with the fully-formed dependencies it requires
• Injector = container of service instances

constructor(private _service: HeroService){ }

---------------------------------------------

@Component({
  providers:   [HeroService]
})
export class HeroesComponent { ... }