AngularJS HTML5-Anwendungen im Silverlight-Stil

7a1b0b24e5251ee7f5407681cca7d142?s=47 Ingo Rammer
March 06, 2014
310

AngularJS HTML5-Anwendungen im Silverlight-Stil

7a1b0b24e5251ee7f5407681cca7d142?s=128

Ingo Rammer

March 06, 2014
Tweet

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