AngularJS 2.0
Download as pptx, pdf4 likes1,454 views
AngularJS 2.0 è stato progettato per affrontare le sfide del web moderno, con un focus sulle performance e sul supporto per il mobile. Le nuove funzionalità, come il lazy loading e il supporto per ECMAScript 6, mirano a semplificare lo sviluppo delle applicazioni. Inoltre, la transizione da AngularJS 1.x a 2.0 implica un cambiamento significativo nelle pratiche di sviluppo, inclusa l'adozione di TypeScript.
![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](https://image.slidesharecdn.com/gltuqvrtshus6zagb4ip-signature-f86366f3e18c2fdac92e3779f32a992cd8ca22e2a850ea0e40a1f07163a1c4f1-poli-150510083055-lva1-app6891/85/AngularJS-2-0-16-320.jpg)
![Property Binding
<div>
<button [disabled]="name.value == '' " (click)="name.value = ''"> Clear </button>
</div>
[property] lega una proprietà del DOM al risultato di un’espressione](https://image.slidesharecdn.com/gltuqvrtshus6zagb4ip-signature-f86366f3e18c2fdac92e3779f32a992cd8ca22e2a850ea0e40a1f07163a1c4f1-poli-150510083055-lva1-app6891/85/AngularJS-2-0-19-320.jpg)
![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://image.slidesharecdn.com/gltuqvrtshus6zagb4ip-signature-f86366f3e18c2fdac92e3779f32a992cd8ca22e2a850ea0e40a1f07163a1c4f1-poli-150510083055-lva1-app6891/85/AngularJS-2-0-24-320.jpg)
![Template (helloTemplate.html)
<div>
<input #name type="text" (keyup) /> Hello {{name.value}} !!!
<button [disabled]="name.value == ''" (click)="name.value = ''"> Clear </button>
</div>](https://image.slidesharecdn.com/gltuqvrtshus6zagb4ip-signature-f86366f3e18c2fdac92e3779f32a992cd8ca22e2a850ea0e40a1f07163a1c4f1-poli-150510083055-lva1-app6891/85/AngularJS-2-0-26-320.jpg)
AngularJS 2.0
- 2. 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
- 3. ECMAScript Harmony ❏ 1999 ECMAScript 3 ❏ 2008 abbandono della versione 4 (troppo ambiziosa) ❏ 2009 esce ECMAScript 5 (poche novità) ❏ 2015 si attende ECMAScript 6 (Harmony)
- 4. ES6 - New Features ❏ classes ❏ iterators + for..of ❏ modules ❏ promises ❏ math + number + string + array + object APIs ❏ ...
- 5. ES6 - Non ancora supportato ❏ Non è ancora stato presentato ES6 ❏ I browser attuali supportano ES5 ❏ Traceur per usare le feature ES6 su ES5
- 6. 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)
- 7. 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
- 8. Performance "Today, Angular2 is 5x faster than Angular 1" Misko, 2/10/15
- 9. Performance
- 10. Curva di apprendimento AngularJS 1.x Moduli Direttive Custom
- 11. Semplificare ❏ Dependency Injection ❏ Templating ❏ Persistance ❏ Routing ❏ ...
- 12. Cosa cambierà? ❏ Scope ❏ Controller ❏ Directive ❏ Module ❏ ...
- 13. Development
- 14. Development ❏ AtScript è un linguaggio di scripting sviluppato da Google ❏ TypeScript è un linguaggio di scripting creato da Microsoft ❏ AtScript è TypeScript (ng-conf 2015)
- 15. Development ❏ Supporterà ❏ ES5 ❏ ES6 ❏ TypeScript ❏ E linguaggi javascript compilati come ❏ CoffeeScript ❏ ClojureScript
- 16. 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
- 17. Local Variables <div> <input #name type="text"> {{name.value}} </div> #variabileLocale referenziabile all’interno del template
- 18. Event Handlers <div> <input #name type="text" (keyup) /> Hello {{name.value}} !!! </div> (event)=”controllerMethod()” è possibile associare metodi agli eventi del DOM (click, keyup, mouseover, ...)
- 19. Property Binding <div> <button [disabled]="name.value == '' " (click)="name.value = ''"> Clear </button> </div> [property] lega una proprietà del DOM al risultato di un’espressione
- 20. 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
- 21. 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>
- 22. Starting Component (TypeScript) import {Component, View, bootstrap} from 'angular2/angular2'; @View({ templateUrl: 'helloTemplate.html' }) @Component({ selector: 'my-app' }) class AppComponent { constructor() {} } bootstrap(AppComponent);
- 23. Bootstrap import {Component, View, bootstrap} from 'angular2/angular2' ... bootstrap(AppComponent); ❏ Cosa si deduce da questa sintassi? Lazy Loading!!!
- 24. 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> ...
- 25. View La view annotation consente la definizione dell’HTML che rappresenta il modello @View({ templateUrl: 'helloTemplate.html' }) ❏ template: stringa HTML ❏ templateUrl url del template
- 26. Template (helloTemplate.html) <div> <input #name type="text" (keyup) /> Hello {{name.value}} !!! <button [disabled]="name.value == ''" (click)="name.value = ''"> Clear </button> </div>
- 27. Migrazione a 2.0 ❏ Crearlo senza vincoli con il passato ❏ Renderlo quindi compatibile con le vecchie API
- 28. 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
- 29. Materiale blog ufficiale: https://blog.angularjs.org/ sito ufficiale: http://angular.io/ presentazione ng-europe: http://bit.ly/1EZPJZW
Editor's Notes
- #16: Da verificare