AngularJS HTML5-Anwendungen im Silverlight-Stil

Transcript

1. Ingo Rammer | Thinktecture AG AngularJS – HTML5 Applikationen im Silverlight-Stil
2. Ingo Rammer • Gründer und technischer Consultant bei thinktecture • Mein Fokus – Unterstützung von Entwickler von verteilten, mobile Business-Anwendungen – HTML5/JavaScript auf Windows, iOS, Android – Interoperabilität von HTML5 mit nativem Code auf allen Plattformen @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer think mobile!
3. Single-Page Applications (SPAs)
4. jQuery?
5. MVC/SPA Frameworks Model Binding Routing UI-Templating … unterschiedlichste Design-Ideen und Implementationen
6. http://todomvc.com Feb 2014: 66 Versionen der gleichen App
7. sproutcore Google Trends – Aug 2009 bis Aug 2013
8. backbone.js sproutcore Google Trends – Aug 2009 bis Aug 2013
9. backbone.js ember.js sproutcore Google Trends – Aug 2009 bis Aug 2013
10. backbone.js knockoutjs ember.js sproutcore Google Trends – Aug 2009 bis Aug 2013
11. backbone.js knockoutjs ember.js angularjs sproutcore Google Trends – Aug 2009 bis Herbst 2013
12. AngularJS • http://angularjs.org/, v1.2.x • HTML-zentrische SPAs – ("HTML enhanced for web apps!") • Komponenten aus JS + HTML • Einbettbar, DI-basierend, testbar • Corporate Sponsor: Google
13. Demos http://github.com/ingorammer/talk-AngularJS
14. AngularJS: View • HTML mit Angular-Attributen (Direktiven) – ng-model, ng-app, ng-controller, … – {{meinObjekt.meinFeld}} – {{meinObjekt.meineMethode()}} • Erweiterbar: eigene Tags, Attribute
15. AngularJS: Controller • Business-Logik • Felder auf $scope  sichtbar in der View • KEINE DOM-Manipulationen im Controller!
16. AngularJS: $scope • ViewModel in AngularJS: $scope • Wird dem Controller per Dependency- Injection bereitgestellt • Aktualisierung des GUI: Digest-Zyklus • $apply, um einen Zyklus auszulösen – Directives, Services, Controller
17. AngularJS: Directives • Komponenten (HTML + JS) • Kapseln DOM-Manipulationen • Bekommen Daten aus dem $scope • Applikationsspezifisch oder unabhängig (zB angular-UI) • Können existierende Bibliotheken kapseln
18. AngularJS: Services • Werden per Dependency Injection (DI) an Controller, Directives und andere Services im Konstruktor übergeben • Allgemeine Logik, die nicht von einem einzelnen Use-Case abhängt (sonst: Controller) • Achtung bei Minification (array-syntax oder $inject)
19. AngularJS: Routing • $routeProvider in <module>.config – .when() – .otherwise()
20. Animation • Seit v1.2 • http://slid.es/gsklee/animation-in- angularjs-12
21. AngularJS • Struktur, die bis zu großen JS Apps skaliert – Controller, $scope – DOM-Views, Model-Binding – Directives – Routing – Services – Promises • Keine DOM-Manipulationen im Controller! Meist Directives. Selten Services.
22. Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com