AngularJS HTML5-Anwendungen im Silverlight-Stil

Transcript

1. Ingo Rammer| thinktecture AngularJS HTML5-Anwendungen im Silverlight-Stil think mobile!
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 Sept 2013: 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 Aug 2013
12. 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
13. Demos http://github.com/ingorammer/talk-AngularJS
14. Model Binding Allgemein •  Je nach Framework –  Controller-Initiiert (Templating, jQuery, Handlebars/Mustache, ...) –  Observer-Pattern (Ember, Knockout, ...) –  Framework-Initiiert (Angular)
15. AngularJS: Controller •  Business-Logik •  Felder auf $scope à sichtbar in der View •  KEINE DOM-Manipulationen im Controller!
16. AngularJS: Scope •  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