AngularJS HTML5-Anwendungen im Silverlight-Stil

Slide 1

Slide 1 text

Ingo Rammer | Thinktecture AG AngularJS – HTML5 Applikationen im Silverlight-Stil

Slide 2

Slide 2 text

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 [email protected] http://www.thinktecture.com Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer think mobile!

Slide 3

Slide 3 text

Single-Page Applications (SPAs)

Slide 4

Slide 4 text

jQuery?

Slide 5

Slide 5 text

MVC/SPA Frameworks Model Binding Routing UI-Templating … unterschiedlichste Design-Ideen und Implementationen

Slide 6

Slide 6 text

http://todomvc.com Feb 2014: 66 Versionen der gleichen App

Slide 7

Slide 7 text

sproutcore Google Trends – Aug 2009 bis Aug 2013

Slide 8

Slide 8 text

backbone.js sproutcore Google Trends – Aug 2009 bis Aug 2013

Slide 9

Slide 9 text

backbone.js ember.js sproutcore Google Trends – Aug 2009 bis Aug 2013

Slide 10

Slide 10 text

backbone.js knockoutjs ember.js sproutcore Google Trends – Aug 2009 bis Aug 2013

Slide 11

Slide 11 text

backbone.js knockoutjs ember.js angularjs sproutcore Google Trends – Aug 2009 bis Herbst 2013

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Demos http://github.com/ingorammer/talk-AngularJS

Slide 14

Slide 14 text

AngularJS: View • HTML mit Angular-Attributen (Direktiven) – ng-model, ng-app, ng-controller, … – {{meinObjekt.meinFeld}} – {{meinObjekt.meineMethode()}} • Erweiterbar: eigene Tags, Attribute

Slide 15

Slide 15 text

AngularJS: Controller • Business-Logik • Felder auf $scope  sichtbar in der View • KEINE DOM-Manipulationen im Controller!

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

AngularJS: Routing • $routeProvider in .config – .when() – .otherwise()

Slide 20

Slide 20 text

Animation • Seit v1.2 • http://slid.es/gsklee/animation-in- angularjs-12

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer @ingorammer [email protected] http://www.thinktecture.com