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

TS

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

Clone the repo

https://github.com/manekinekko/devfest-2015-ng2-codelab

Read the documentation

https://angular.io/cheatsheet

HAPPY CODING

YOUR FEEDBACK IS PRECIOUS

(click on the envelop)

UNIVERSAL

 

 

NEEDS YOU

(click on the glob)

Angular 2 Bible

bit.ly/awesome-angular

bit.ly/ng2-design-docs

Angular 2 Design Docs

AngularConnect 2015

bit.ly/ngconnect2015​

Angular 2 Resouces

Join our Front-end crew

#comeTalkToMe

@manekinekko

Copy of Getting Started With Angular 2

By social4hyq

Source: Wassim Chegham

Copy of Getting Started With Angular 2

This is a quick overview for getting started with Angular2. These slides are part of a workshop on getting started with Angular2. Here is the related project: https://github.com/manekinekko/devfest-2015-ng2-codelab

  • 876

More from social4hyq