AngularJS 2.0

AngularJS 2.0

vconte.it

Perchè Angular 2.0?

❏ AngularJS 1.0 risale al 2009❏ Il web sta cambiando:

❏ ES5 -> ES6❏ Sempre più orientato al mobile

❏ Punti Critici Community❏ Lazy Loading❏ Performance (amore e odio con il binding)❏ Troppi concetti - apprendimento a singhiozzo

ECMAScript Harmony

❏ 1999 ECMAScript 3❏ 2008 abbandono della versione 4 (troppo ambiziosa)❏ 2009 esce ECMAScript 5 (poche novità)❏ 2015 si attende ECMAScript 6 (Harmony)

ES6 - New Features

❏ classes❏ iterators + for..of❏ modules❏ promises❏ math + number + string + array + object APIs❏ ...

ES6 - Non ancora supportato

❏ Non è ancora stato presentato ES6❏ I browser attuali supportano ES5❏ Traceur per usare le feature ES6 su ES5

Pensato per il mobile

❏ Best practice per applicazioni mobile/desktop ❏ Pensarla per il mobile❏ Estenderla per il desktop

❏ AngularJS 2.0 è pensato per il mobile (ng-conf 2015)

Lazy Loading

❏ AngularJS 1.x non supporta il lazy loading ❏ Da sempre una delle feature più desiderate❏ Bisogna scaricare intera libreria ❏ Leggera per app desktop non per mobile

Performance

"Today, Angular2 is 5x faster than Angular 1"

Misko, 2/10/15

Performance

Curva di apprendimento

AngularJS 1.x

Moduli

Direttive Custom

Intro

Semplificare

❏ Dependency Injection ❏ Templating❏ Persistance❏ Routing❏ ...

Cosa cambierà?

❏ Scope ❏ Controller❏ Directive❏ Module❏ ... TUTTO!

Development

Development

❏ AtScript è un linguaggio di scripting sviluppato da Google

❏ TypeScript è un linguaggio di scripting creato da Microsoft

❏ AtScript è TypeScript (ng-conf 2015)

Development

❏ Supporterà ❏ ES5 ❏ ES6❏ TypeScript

❏ E linguaggi javascript compilati come❏ CoffeeScript ❏ ClojureScript

Confronto

<div ng-app="helloController"> <input type=”text” ng-model=”name”/> Hello {{name}}!!! <button ng-disabled="name.value == '' " ng-click="name.value = ''"> Clear </button></div>

<div> <input #name type="text" (keyup) /> Hello {{name.value}} !!! <button [disabled]="name.value == '' " (click)="name.value = ''"> Clear </button></div>

ANGULARJS 1.x ANGULARJS 2.0

Local Variables

<div> <input #name type="text"> {{name.value}}</div>

#variabileLocale referenziabile all’interno del template

Event Handlers

<div> <input #name type="text" (keyup) /> Hello {{name.value}} !!!</div>

(event)=”controllerMethod()” è possibile associare metodi agli eventi del DOM (click, keyup, mouseover, ...)

Property Binding

<div> <button [disabled]="name.value == '' " (click)="name.value = ''"> Clear </button></div>

[property] lega una proprietà del DOM al risultato di un’espressione

Angular2 application

4 steps:

1. Creare un entry point

2. Caricare la libreria Angular all’inizio del file

3. Creare un componente di root dell’applicazione

4. Fare il Bootstrap di Angular

Entry Point<html><head> <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script> <script src="https://jspm.io/[email protected]"></script> <script src="angular2.dev.js"></script></head><body><my-app></my-app><script> System.import('main');</script></body></html>

Starting Component (TypeScript)import {Component, View, bootstrap} from 'angular2/angular2';

@View({ templateUrl: 'helloTemplate.html'})@Component({ selector: 'my-app'})class AppComponent {

constructor() {}}

bootstrap(AppComponent);

Bootstrap import {Component, View, bootstrap} from 'angular2/angular2'...bootstrap(AppComponent);

❏ Cosa si deduce da questa sintassi? Lazy Loading!!!

Component “Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template.” [angular.io]

@Component({

selector: 'my-app'

})

❏ @Component: annotation consente la dichiarazione di un componente. ❏ selector definisce il tag del componente

class AppComponent {

constructor() {}

}

❏ class: specifica la logica applicativa del componente

... <my-app></my-app>...

https://angular.io/docs/js/latest/guide/making-components.html

View

La view annotation consente la definizione dell’HTML che rappresenta il modello

@View({

templateUrl: 'helloTemplate.html'

})

❏ template: stringa HTML ❏ templateUrl url del template

Template (helloTemplate.html)<div> <input #name type="text" (keyup) /> Hello {{name.value}} !!! <button [disabled]="name.value == ''" (click)="name.value = ''"> Clear </button></div>

Migrazione a 2.0

❏ Crearlo senza vincoli con il passato❏ Renderlo quindi compatibile con le vecchie API

About me

❏ Sito: http://www.vconte.it/

❏ Email: [email protected]

❏ LinkedIn: http://www.linkedin.com/pub/vittorio-conte/30/29a/191❏ AngularJS Italia

❏ LinkedIn: https://www.linkedin.com/groups/AngularJS-Italia-7442742

❏ Twitter: @AngularJSItalia

http://www.vconte.it/

mailto:[email protected]

http://www.linkedin.com/pub/vittorio-conte/30/29a/191

https://www.linkedin.com/groups/AngularJS-Italia-7442742

Materiale

blog ufficiale: https://blog.angularjs.org/sito ufficiale: http://angular.io/presentazione ng-europe: http://bit.ly/1EZPJZW

https://blog.angularjs.org/

http://angular.io/

http://bit.ly/1EZPJZW

AngularJS 2.0

Technology