AngularJS 2.0
Download as PPTX, PDF
4 likes1,454 views
Presentazione del nuovo tanto atteso framework javascript della famiglia google. AngularJS 2.0
![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 unespressione](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 allinterno 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 unespressione
- 20. Angular2 application 4 steps: 1. Creare un entry point 2. Caricare la libreria Angular allinizio del file 3. Creare un componente di root dellapplicazione 4. Fare il Bootstrap di Angular
- 21. Entry Point <html> <head> <script src=/VittorioConte/angularjs-20-47959089/"https:/github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur- runtime.js"></script> <script src="https://jspm.io/system@0.16.js"></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 dellHTML 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: vitconte@gmail.com 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
- Da verificare