Embed Size (px)
Citation preview
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>...
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
Materiale
blog ufficiale: https://blog.angularjs.org/sito ufficiale: http://angular.io/presentazione ng-europe: http://bit.ly/1EZPJZW
![Let's explore AngularJS / [fr]Explorons AngularJS. GDG Montreal](https://img.pdfslide.tips/doc/110x75/554be4ceb4c9055a368b4841/lets-explore-angularjs-frexplorons-angularjs-gdg-montreal.jpg)
