AngularJS
- 1. www.agentbase.de 1 Expertenkreis Java 27.August 2015 Michael Steinhoff – agentbase AG
- 2. www.agentbase.de 2 AngularJS agentbase AG - Profil IT-Dienstleister, Paderborn Focus Business Process Management Portale Social Business Anwendungsentwicklung Anwendungsmodernisierung / -webifizierung Systemintegration / -administration Schulungen und Workshops
- 3. www.agentbase.de 3 AngularJS Agenda Einführung Konzepte Demo Tests, Tests, Tests Ausblick Version 2.0
- 6. www.agentbase.de 6 AngularJS Einführung < HTML has angle brackets, so angle brackets, Angular > Start ~2009 Entwicklung von Google Feedback stockte Neuentwicklung mit damaligem Angular Framework 2-3 Wochen 17.000 1.500 Codezeilen Google hauptsächlich interne Apps (form-driven) DoubleClick YouTube Leanback (SmartTV)
- 7. www.agentbase.de 7 AngularJS Einführung “Angular is what HTML would have been, had it been designed for applications. “ (angularjs.org) HTML gut für statische Seiten Angular ergänzt um Syntax und Konstrukte für Web-Apps Abstraktion von Low-level DOM Operationen
- 8. www.agentbase.de 8 AngularJS Einführung Dinge die der Entwickler nicht braucht… Manuelle HTML DOM Manipulation unhandlich und fehleranfällig Bereitstellen von Daten für und von dem UI CRUD Operationen sind die wesentlichen Aufgaben Server Internes Objekt HTML Form AngularJS arbeitet mit einfachen JavaScript POJOs Boilerplate Code Code schreiben, um den eigentlichen Code schreiben zu können
- 12. www.agentbase.de 12 AngularJS Single-Page Application Framework Kein kompletter Seiten-Reload Backend Zugriffe ausschließlich über Ajax Vorteile Plattformunabhängigkeit Benutzerfreundlichkeit Offlinefähigkeit Architektur Trend zu Service-basierten Systemen Seiten sind bookmarkable Nachteile JavaScript zulassen verschiedene Browser (Framework Entwicklung) SEO
- 13. www.agentbase.de 13 AngularJS Model-View-Controller Trennung Logik und Darstellung Senken Komplexität Bessere Wartbarkeit Bessere Testbarkeit
- 14. www.agentbase.de 14 AngularJS Model-View-ViewModel Weiterentwicklung MVC ViewModel Entkopplung Präsentationslogik von UI Deklarative Bindung zum UI, kennt View selbst nicht Testbarkeit Präsentationslogik
- 15. www.agentbase.de 15 AngularJS 2-Wege Datenbindung Model – Single-Source of Truth Änderung des Models bewirkt Änderung in gesamter Anwendung Kein Observer notwendig, weniger fehleranfälliger Code Keine direkte DOM – Maniplation!
- 16. www.agentbase.de 16 erste kurze Demo AngularJS 2-Wege Datenbindung
- 17. www.agentbase.de 17 AngularJS Dirty Checking View wird sofort aktualisiert wenn das Model sich ändert innerhalb des aktuellen Scopes (ViewModel) gilt nur für angezeigte Daten Es wird ständig auf Aktualisierungen geprüft Performance-Impact bei starker Nutzung bei ng-model dirty checking bei jedem Tastendruck
- 18. www.agentbase.de 18 AngularJS Expressions {{expression}} Daten aus dem Scope in der View anzeigen $scope.expression Automatisches Update durch dirty checking
- 19. www.agentbase.de 19 AngularJS Filter Transformationen {{expression | lowercase}} {{expression | date}} {{expression | uppercase}} {{expression | number}} {{expression | currency}} {{expression | json}} Daten - Einschränkungen
- 20. www.agentbase.de 20 AngularJS Controller Controller definieren einen Scope für einen Teil des DOM HTML JavaScript
- 21. www.agentbase.de 21 AngularJS Scope Hierarchien Root Scope überall vorhanden nur für Daten verwenden, nicht für Funktionen Service Expressions werden von innen nach außen evaluiert
- 22. www.agentbase.de 22 AngularJS Routing Konzept von Single-Page Applications Mapping von URLs auf Templates und Controller
- 23. www.agentbase.de 23 AngularJS Dependency Injection Prinzip: Inversion of control Kontrolle über Instanziierung wird an zentrale Stelle abgegeben Ohne dependency injection Mit dependency injection
- 24. www.agentbase.de 24 AngularJS Dependency Injection Vorteile Modularer und wiederverwendbarer Code Der Code wird wartbarer Bessere Testbarkeit Die API wird einfacher und abstrakter Injektion über den Namen Aufpassen bei Minifyer/Obfuscator!
- 25. www.agentbase.de 25 AngularJS Services Services sind Singletons Erst bei Benutzung instanziiert (Lazy) Austauschbar Objekte genutzt mittels Dependency Injection Angular bringt schon eigene Services mit ( z.B. „$http“) Verschiedene Typen Provider komplex Factory Service Value einfach
- 26. www.agentbase.de 26 AngularJS Promises $http-Service läuft asynchron Promise: mögliches Ergebnis eines asynchronen Calls Verwendung des Promise z.B. in einem Controller Durchführung sobald Ergebnis aus Service vorliegt Ähnlich zu try-catch für synchrone Calls
- 27. www.agentbase.de 27 AngularJS Promises deferred Objekt über $q resolve(value) reject(reason) notify(value)
- 28. www.agentbase.de 28 AngularJS Direktiven Verwendbar über neue HTML Tags Wiederverwendbare Komponenten AngularJS bringt viele Direktiven mit ngRepeat ngShow ngModel ngClick
- 30. www.agentbase.de 30 AngularJS Module Container für verschiedene Teile der Anwendung Jede Anwendung besteht aus min. einem Modul Kapselung in wiederverwendbare Module Laden in beliebiger Reihenfolge Viele 3rd party Module verfügbar
- 31. www.agentbase.de 31 AngularJS Module Setup in größeren Anwendungen Ein Modul für jedes Feature Ein Modul für jede wiederverwendbare Komponente Direktiven Filter Ein Applikations-Modul das alle anderen Module beinhaltet
- 32. www.agentbase.de 32 zweite kurze Demo AngularJS Ein einfaches Beispiel
- 33. www.agentbase.de 33 AngularJS Weitere Module Es gibt eine Vielzahl hinzufügbarer Module Internationalisierung Maskenerstellung und Validierung Sichten, Tabellen und Filter UI-Elemente Spinner Breadcrumb File-Upload Messages … Charts und vieles mehr http://ngmodules.org/ (>1500 Module)
- 34. www.agentbase.de 34 AngularJS Bootstrap CSS / HTML /Javascript Framework von Twitter Wird gerne zusammen mit AngularJS verwendet Styling von Tabellen Formularen Buttons Grids, Responsive Einige Komponenten machen Probleme wegen jQuery Spezielle Projekte UI Bootstrap (http://angular-ui.github.io/bootstrap/) AngularStrap (http://mgcrea.github.io/angular-strap/)
- 36. www.agentbase.de 36 Tests, Tests, Tests AngularJS
- 37. www.agentbase.de 37 AngularJS Programmieren mit JavaScript JavaScript Guru Douglas Crockford spezifizierte JSON „JavaScript is the only language that I’m aware of that people feel they don’t need to learn before they start using it.“
- 38. www.agentbase.de 38 AngularJS Test, Test, Tests mehr „Seriosität“ bei der Entwicklung Unit Tests Code-level Testing Testen von einzelnen Komponenten Isoliertes Testen Angular Code Base > 4000 Unit Tests End-To-End Tests User-level Testing Testen Zusammenspiel mehrerer Komponenten Automatische Browser Tests Laden von Seiten Masken Submit Prüfen auf Vorhandensein von Seiten Elementen
- 39. www.agentbase.de 39 AngularJS Test, Test, Tests Mock-Objekte Platzhalter für „echte“ Objekte keine dynamischen Ergebnisse gewünscht kein Zugriff auf andere Systeme notwendig Dependency Injection vereinfacht Testen Dependencies können relativ einfach „gemocked“ werden
- 40. www.agentbase.de 40 AngularJS Unit Tests - Tools Karma Test-Runner JavaScript Command-Line Tool startet HTTP Server und führt die Tests durch testet gegen die gängigsten Browser Jasmine Test-Framework Test-Strukturierung Assertions ngMock Angular Modul liefert definierte Ergebnisse für REST-Calls
- 41. www.agentbase.de 41 AngularJS Unit Tests - Jasmine describe() Test-Beschreibung beforeEach() / afterEach() wird vor / nach jedem Testlauf ausgeführt expect() erwartetes Ergebnis eines Testdurchlaufs toBe() / toEquals / toBeNull() / toBeLessThan() … Matcher
- 42. www.agentbase.de 42 AngularJS Unit Tests - ngMock module() lädt ein Angular Modul für den Unit Test inject() Dependency Injection für den Unit Test $controller Instanziierung von Controllern $httpBackend mocken eines http-Service
- 43. www.agentbase.de 43 AngularJS Unit Tests - Beispiel
- 44. www.agentbase.de 44 AngularJS End-To-End Tests - Tool Protractor Frontend für Selenium Verwendet Jasmine Test Syntax Objekte browser – Zugriff auf Browser (z.B. Url) element().by… – Zugriff Elemente im Source Code by.css(`h2.cssClass`) by.model(`modelvar`) by.binding(`binding`) sendKeys() – Eingabe durchführen
- 45. www.agentbase.de 45 AngularJS End-To-End Tests - Beispiel
- 46. www.agentbase.de 46 Ausblick Version 2.0 AngularJS
- 47. www.agentbase.de 47 AngularJS Ausblick Version 2.0 Motivation Performance neue Technologien und Browser Mobile First Ease of Use – focus on business
- 48. www.agentbase.de 48 AngularJS Ausblick Version 2.0 Designed für moderne Browser Internet Explorer > Version 10 mobile Geräte im Vordergrund ECMAScript 6 Published 06-2015 Weitere Modularisierung Optimierung Change Detection Erweitertes Routing Integration von Authentifikation und Autorisierung State-basiertes Routing Vorladen und Verschachteln von Views
- 49. www.agentbase.de 49 AngularJS Ausblick Version 2.0 Version 1.x Controller $scope ES5 Angular Module relevant (geschätzt) bis 2018 Version 2.0 noch Alpha Web Components ES6 und ES6 Module Annotationen ab (im Laufe von) 2016 Migrationspfad?
- 50. www.agentbase.de 50 AngularJS Ausblick auf Version 2.0 – Hello World Angular 1.x
- 51. www.agentbase.de 51 AngularJS Ausblick auf Version 2.0 – Hello World Angular 2.0 mit TypeScript (https://angular.io/docs/js/latest/index.html)
- 52. www.agentbase.de 52 Vielen Dank für Ihre Aufmerksamkeit! agentbase AG Eggertstraße 7 33100 Paderborn Fon: +49 5251 547 2600 Fax: +49 5251 547 2699 E-Mail: info@agentbase.de Web: www.agentbase.de