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

TS

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

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'
        );
  }
}
<span myHighlight >Highlight me!</span>

ATTRIBUTE DIRECTIVES

CONGRATULATIONS!

PULL REQUESTS 

ARE WELCOME

Q & A

YOUR FEEDBACK IS PRECIOUS

(click on the envelop)

Angular 2 Bible

bit.ly/awesome-angular

NgConf 2015

bit.ly/ngconf--2016

Angular 2 RC1 (Plunker)

bit.ly/ng2-rc1-plunker

Angular 2 Resouces

Join Our Front-End Crew

Come talk to me or DM on twitter @manekinekko

and much more...

See you at ngeurope 2016

promo code

ng-europe-15pc

manekinekko

Getting Started With Angular 2

By Wassim Chegham

Getting Started With Angular 2

These slides are part of a workshop on getting started with Angular2 given by Wassim Chegham (@manekinekko). Here is the related project: https://github.com/manekinekko/angular2-codelab/

  • 12,579

More from Wassim Chegham