Getting

started with

Angular 2

#DevFest #nantes

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

DEVELOPER PREVIEW

“

don't try this on production!

#ALPHA-45

Prepare yourself!

IN THIS WORKSHOP

THINGS MAY — WILL BREAK

“

Web Technologies Architect at SII (Paris)

Google Developer Expert in AngularJS

Wassim Chegham

@manekinekko

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

WHY ANGULAR 2?

MOVING THE WEB FORWARD

THE WEB PLATFORM IS

EVOLVING

SO DOES

ANGULAR!

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

other awesomeness…

Server Rendering*

Web Workers

Native Apps

…

* https://github.com/angular/universal

collaboration

CLI

Components

FLUX

Annotations

ES6 - ES7

TIME

TO LEARN ANGULAR 2

Angular 2

is built using

TypeScript

ES5

ES2015

ES2016

ES+

you can use TypeScript

ES6/7 or ES5

you should learn ES6/7

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

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

you should learn TypeScript

http://www.typescriptlang.org/Handbook

DISCOVER

THE NEW CONCEPTS

YOUR

APPLICATION

IS A TREE OF

SELF-DESCRIBING

COMPONENTS

import {Component} from 'angular2/angular2';

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

THIS IS A COMPONENT

<!-- index.html -->
<devfest>
    Your application is loading...
</devfest>

// application.ts
import {Component} from 'angular2/angular2';
import {Toolbar} from './components/toolbar/toolbar';

FOR INSTANCE

@Component({
  selector: 'devfest'
  template: `<toolbar></toolbar>`,
  directives: [ Toolbar ]
})
export class Devfest { /* ... */ }

A LOT MORE

// class decorators
@Component({...})
@Pipe({...})
@Directive({...})
@RouteConfig([...])
@Injectable()

// fields decorators
@Input()
@Output()
@HostBinding([...])
@ViewChild()
//...etc

// lifecylces
onInit()
onDestroy()
onChanges()
afterViewInit()
//...etc

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

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

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

<!-- builtin directives -->
<section *ng-if="showSection">
<li *ng-for="#item of list">

<!-- ...etc -->

#LET'S HAVE FUN!

#WORKSHOP TIME

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