Getting

started with

Angular 2

http://ramonmr.com/wp-content/uploads/2015/05/Google-Material-Design-Wallpaper.jpg

outline

Why all these changes?

Discover the new hotness

Let's hack with Angular 2

goal

Learn angular 2 basics

Collect feedbacks

Have fun

ANGULAR2 IS IN RC STAGE

“

#RC-1

Don't panic, we're here to help...

IN THIS WORKSHOP

THINGS MAY — WILL BREAK

“

IF YOU FIND BUGS, PLEASE REPORT THEM

“

Wassim Chegham @manekinekko

Developer Advocate at SFEIR

Google Developer Expert (GDE) in Angular

global network of experienced product strategists, designers, developers and marketing professionals that actively support developers and startups.

TIME

TO LEARN ANGULAR 2

Angular 2

is built using

TypeScript

ES5

ES2015

ES2016

ES+

you can use TypeScript

ES6/7 or ES5

you must

learn ES2015+

https://babeljs.io/docs/learn-es2015/

bit.ly/learn-es2015 - Learn ES6 (french only)

you should learn TypeScript

http://www.typescriptlang.org/Handbook

WHY ANGULAR 2?

MOVING THE WEB FORWARD

THE WEB PLATFORM IS

EVOLVING

SO DOES

ANGULAR!

ANGULAR

IS MORE THAN JUST A FRAMEWORK

ITS A PLATFORM

mobile first • future ready • performance • speed • simplicity • expressiveness • immutability• animations • comprehensive routing • hierarchical DI • web components • i18n • a11y …

Other awesomeness…

Server Rendering

Material Design

Web Workers

Native Apps

Animations

PWA

CLI

...

#WORKSHOP TIME

https://plus.google.com/photos/+AlejandroDeLaRosa05/albums/6110903958455761281/6110904013763089538?sqi=109024875292709480869&sqsi=c3d26bbe-f1d7-4759-92bf-1df7959cd77c&pid=6110904013763089538&oid=114772705002835242470

Clone the repo

https://github.com/manekinekko/angular2-codelab

please update to get the latest changes

Open the steps

https://github.com/manekinekko/angular2-codelab/STEPS.md

Open Gitter

gitter.im/manekinekko/

angular2-codelab

Grab the slides

bit.ly/ng2-codelab -2

PUT ON SOME MUSIC

LET'S HAVE FUN

DISCOVER

THE NEW CONCEPTS

BREAK TIME

YOUR APP

IS A TREE OF

SELF-DESCRIBING

COMPONENTS

import {Component} from '@angular/core';

@Component({
    /* configuration */
})
class Application { 
    /* ... */ 
}

THIS IS A COMPONENT

import {Component} from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';

@Component({
    /* configuration */
})
class Application { 
    /* ... */ 
}

bootstrap(Application, [ /* deps */ ])

BOOTSTRAPING

BREAK TIME

COMPONENTS HAVE

TEMPLATES

TEMPLATE SYNTAXE

<!-- properties binding -->
<input [value]="firstName">
<div [style.width.px]="mySize">
<label [attr.for]="someName"></label>

<!-- event binding -->
<button (click)="readRainbow($event)">

<!-- two way binding -->
<my-cmp [(title)]="name">

<!-- builtin directives -->
<section *ngIf="showSection">
<li *ngFor="let item of list">

<!-- ...etc -->

COMPONENTS

HAVE

LIFECYCLES

class Application { 
  ngOnInit() {}
  ngOnDestroy() {}
  ngDoCheck() {}
  ngOnChanges(records) {}
  ngAfterContentInit() {}
  ngAfterContentChecked() {}
  ngAfterViewInit() {}
  ngAfterViewChecked() {}
}

AVAILABLE LIFE CYCLES

import {Component} from '@angular/core';

@Component({
    /* configuration */
})
class Application { 
    /* ... */ 

    ngOnInit() {
        // Properties are resolved and things like
        // this.mapWindow and this.mapControls
        // had a chance to resolve from the
        // two child components <map-window> and <map-controls>
    }
}

FOR INSTANCE

COMPONENTS

CAN HAVE

STATE

STATE MANAGMENT

[ property binding ]

( event binding )

import {Component, Input, AfterViewInit, EventEmitter} from '@angular/core';
@Component({
    /* configuration */
})
export class ThemeCard implements AfterViewInit {

  @Input() inputProperty: string;

  @Output() outputEvent: EventEmitter<string>;

  constructor() {
    this.outputEvent = new EventEmitter<string>();
  }

  ngAfterViewInit() {
    console.log(this.inputProperty);
  }
  onClick() {
    this.outputEvent.emit('foo');
  }

}

FOR INSTANCE

BREAK TIME

COMPONENTS ARE

ROUTABLE

COMPONENT ROUTER

import { ROUTER_DIRECTIVES, RouteConfig } from '@angular/router-deprecated';

@Component({ 
  selector: 'app',
  template: `
  <h1>Component Router</h1>
  <nav>
    <a [routerLink]="['Customers']">Customers</a>
    <a [routerLink]="['Orders', {id: order.id}]">Orders</a>
  </nav>
  <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
{ path: '/', name: 'Customers', component: CustomersComponent, useAsDefault: true }, 
{ path: '/orders/:id', name: 'Orders', component: OrdersComponent },
{ path: '/details/...', name: 'OrderDetails', component: DetailsComponent }
])

export class AppComponent {

    constructor(private params: RouteParams) {
        let id = this.params.get('id');
    }

}

BOOTSTRAPING THE ROUTER

import {provide}          from '@angular/core';
import { bootstrap }      from '@angular/platform-browser-dynamic';
import {AppComponent}     from './app.component';
import {
    ROUTER_PROVIDERS, 
    PathLocationStrategy,
    LocationStrategy // or HashLocationStrategy
} from '@angular/router-deprecated';


bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, {
        useClass: PathLocationStrategy // or HashLocationStrategy
    })
]);

BREAK TIME

COMPONENTS CAN CONTAIN

PROVIDERS

import { Component } from '@angular/core';
import { DataStore } from './my-store';

@Component({
  selector: 'home',

  providers: [ DataStore ],

  //...
})
export class Home {

  private data: any[];

  constructor(data: DataStore){
    this.data = data.someAPI();
  }

}

LOCAL PROVIDERS

import { bootstrap } from '@angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '@angular/router';

import {MyApp} from './app/ng2-codelab';

bootstrap(MyApp,[
  ROUTER_PROVIDERS,
  //...
]);

GLOBAL PROVIDERS

PROVIDERS CONFIGURATION

import { Component, provide } from '@angular/core';
import { DataStore } from './my-store';

@Component({
  providers: [ DataStore ]
})
export class Home { /*  */ }

[ provide(DataStore, {useClass: DataStore}) ]

// values
provide(String, {useValue: 'Hello World'})

// aliases
provide(DataStore, {useClass: DataStore})
provide(MockedDataStore, {useExisting: DataStore})


// factories
provide(DataStore, {
  useFactory: (dep1, dep2) => {
    return new DataStore(dep1, dep2);
  },
  deps: [Dep1, Dep2]
})

PROVIDERS CONFIGURATION

BREAK TIME

COMPONENTS CAN USE

PIPES

ARE LIKE NG1 FILTERS

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'trim'
})
export class TrimPipe implements PipeTransform {
  transform(value: any) {
    if (!value) {
      return '';
    }
    return value.trim();
  }
}

CUSTOM PIPES

DatePipe,

UpperCasePipe,

LowerCasePipe,

CurrencyPipe,

PercentPipe

...

BUILT-INS PIPES

BREAK TIME

COMPONENTS CAN USE

DIRECTIVES

THEY ARE CALLED ATTRIBUTES

DIRECTIVES

import {
  Directive, 
  ElementRef, 
  Renderer, 
} from '@angular/core';

@Directive({
  selector: '[myHighlight]'
})
export class MyHighlightDirective {
  constructor(el: ElementRef, renderer: Renderer) {
    renderer
        .setElementStyle(
            el.nativeElement, 
            'backgroundColor', 
            'yellow'
        );
  }
}