AngularJS – Schmerzlos mit HTML5 und JavaScript

German Session from MobileTechConference 2013 in Berlin

Transcript

1. Ingo Rammer | thinktecture AngularJS – Schmerzlos mit HTML5 und JavaScript
2. Single-Page Applications (SPAs)
3. jQuery?
4. MVC/SPA Frameworks Model Binding Routing UI-Templating … unterschiedlichste Design-Ideen und Implementationen
5. http://todomvc.com Sept 2013: 66 Versionen der gleichen App
6. sproutcore Google Trends – Aug 2009 bis Aug 2013
7. backbone.js sproutcore Google Trends – Aug 2009 bis Aug 2013
8. backbone.js ember.js sproutcore Google Trends – Aug 2009 bis Aug 2013
9. backbone.js knockoutjs ember.js sproutcore Google Trends – Aug 2009 bis Aug 2013
10. backbone.js knockoutjs ember.js angularjs sproutcore Google Trends – Aug 2009 bis Aug 2013
11. AngularJS • http://angularjs.org/, v1.2RC1 • HTML-zentrische SPAs – ("HTML enhanced for web apps!") • Komponenten aus JS + HTML • Einbettbar, DI-basierend, testbar • Corporate Sponsor: Google
12. Demos http://github.com/ingorammer/talk-AngularJS
13. Model Binding Allgemein • Je nach Framework – Controller-Initiiert (Templating, jQuery, Handlebars/Mustache, ...) – Observer-Pattern (Ember, Knockout, ...) – Framework-Initiiert (Angular)
14. AngularJS: Controller • Business-Logik • Felder auf $scope  sichtbar in der View • KEINE DOM-Manipulationen im Controller!
15. AngularJS: Scope • Digest-Zyklus • $apply, um einen Zyklus auszulösen – Directives, Services, Controller
16. 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
17. 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)
18. AngularJS: Routing • $routeProvider in <module>.config – .when() – .otherwise()
19. Animation • Seit v1.2 • http://slid.es/gsklee/animation-in- angularjs-12
20. 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.
21. Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com