SlideShare ist ein Scribd-Unternehmen logo
www.agentbase.de 1
Expertenkreis Java
27.August 2015
Michael Steinhoff – agentbase AG
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
www.agentbase.de 3
AngularJS
Agenda
Einführung
Konzepte
Demo
Tests, Tests, Tests
Ausblick Version 2.0
www.agentbase.de 4
AngularJS
Einführung
Google Webtrends
www.agentbase.de 5
AngularJS
Einführung
Indeed.com Job Trends
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)
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
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
www.agentbase.de 9
AngularJS
Einführung
www.agentbase.de 10
AngularJS
Einführung
www.agentbase.de 11
Konzepte
AngularJS
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
www.agentbase.de 13
AngularJS
Model-View-Controller
Trennung Logik und Darstellung
Senken Komplexität
Bessere Wartbarkeit
Bessere Testbarkeit
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
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!
www.agentbase.de 16
erste kurze Demo
AngularJS
2-Wege Datenbindung
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
www.agentbase.de 18
AngularJS
Expressions
{{expression}}
Daten aus dem Scope in der View anzeigen
$scope.expression
Automatisches Update durch dirty checking
www.agentbase.de 19
AngularJS
Filter
Transformationen
{{expression | lowercase}} {{expression | date}}
{{expression | uppercase}} {{expression | number}}
{{expression | currency}} {{expression | json}}
Daten - Einschränkungen
www.agentbase.de 20
AngularJS
Controller
Controller definieren einen Scope für einen Teil des DOM
HTML
JavaScript
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
www.agentbase.de 22
AngularJS
Routing
Konzept von Single-Page Applications
Mapping von URLs auf Templates und Controller
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
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!
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
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
www.agentbase.de 27
AngularJS
Promises
deferred Objekt über $q
resolve(value)
reject(reason)
notify(value)
www.agentbase.de 28
AngularJS
Direktiven
Verwendbar über neue HTML Tags
Wiederverwendbare Komponenten
AngularJS bringt viele Direktiven mit
ngRepeat
ngShow
ngModel
ngClick
www.agentbase.de 29
AngularJS
Direktiven
Eigene Komponenten
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
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
www.agentbase.de 32
zweite kurze Demo
AngularJS
Ein einfaches Beispiel
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)
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/)
www.agentbase.de 35
Demo
AngularJS
www.agentbase.de 36
Tests, Tests, Tests
AngularJS
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.“
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
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
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
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
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
www.agentbase.de 43
AngularJS
Unit Tests - Beispiel
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
www.agentbase.de 45
AngularJS
End-To-End Tests - Beispiel
www.agentbase.de 46
Ausblick Version 2.0
AngularJS
www.agentbase.de 47
AngularJS
Ausblick Version 2.0
Motivation
Performance
neue Technologien und Browser
Mobile First
Ease of Use – focus on business
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
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?
www.agentbase.de 50
AngularJS
Ausblick auf Version 2.0 – Hello World
Angular 1.x
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)
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

Weitere ähnliche Inhalte

Was ist angesagt?

UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
Andreas Kunz
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
gedoplan
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
Sebastian Springer
 
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
atwork
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
Manfred Steyer
 
Angular 2 Slides
Angular 2 SlidesAngular 2 Slides
Angular 2 Slides
Manfred Steyer
 
Creasoft - Windows Azure
Creasoft - Windows AzureCreasoft - Windows Azure
Creasoft - Windows AzureCreasoft AG
 

Was ist angesagt? (8)

UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
UI5 Custom Controls (German language!) - Präsentation von den DSAG Thementage...
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
SharePoint Konferenz 2014 Munich - Wie Sie Office 365 mit Windows Azure steue...
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Angular 2 Slides
Angular 2 SlidesAngular 2 Slides
Angular 2 Slides
 
Creasoft - Windows Azure
Creasoft - Windows AzureCreasoft - Windows Azure
Creasoft - Windows Azure
 

Ähnlich wie AngularJS

SPA (Single Page Application) mit AngularJS und ASP.net Web API
SPA (Single Page Application) mit AngularJS und ASP.net Web API SPA (Single Page Application) mit AngularJS und ASP.net Web API
SPA (Single Page Application) mit AngularJS und ASP.net Web API
AllFacebook.de
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
AngularJs
AngularJsAngularJs
AngularJs
NETUserGroupBern
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
Hendrik Lösch
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
Digicomp Academy AG
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
Manfred Steyer
 
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der CloudBasta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Marc Müller
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
Manfred Steyer
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
NETUserGroupBern
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
Manfred Steyer
 
API-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingAPI-Design, Microarchitecture und Testing
API-Design, Microarchitecture und Testing
OPEN KNOWLEDGE GmbH
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
Daniel Fisher
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
gedoplan
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile ServicesSascha Dittmann
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
Philipp Burgmer
 
Serverless Application Framework
Serverless Application FrameworkServerless Application Framework
Serverless Application Framework
BATbern
 
Microservices - Was EAs zu Microservices wissen sollten
Microservices - Was EAs zu Microservices wissen solltenMicroservices - Was EAs zu Microservices wissen sollten
Microservices - Was EAs zu Microservices wissen sollten
Jan Thielscher
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
adesso AG
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 
CodeFluent Entities and AppSofa
CodeFluent Entities and AppSofaCodeFluent Entities and AppSofa
CodeFluent Entities and AppSofa
Mykola Dobrochynskyy
 

Ähnlich wie AngularJS (20)

SPA (Single Page Application) mit AngularJS und ASP.net Web API
SPA (Single Page Application) mit AngularJS und ASP.net Web API SPA (Single Page Application) mit AngularJS und ASP.net Web API
SPA (Single Page Application) mit AngularJS und ASP.net Web API
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
AngularJs
AngularJsAngularJs
AngularJs
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
Basta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der CloudBasta 2016 - Test- und Releaseumgebungen in der Cloud
Basta 2016 - Test- und Releaseumgebungen in der Cloud
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
 
ASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine EinführungASP.NET MVC 2 - Eine Einführung
ASP.NET MVC 2 - Eine Einführung
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
 
API-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingAPI-Design, Microarchitecture und Testing
API-Design, Microarchitecture und Testing
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Services
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
 
Serverless Application Framework
Serverless Application FrameworkServerless Application Framework
Serverless Application Framework
 
Microservices - Was EAs zu Microservices wissen sollten
Microservices - Was EAs zu Microservices wissen solltenMicroservices - Was EAs zu Microservices wissen sollten
Microservices - Was EAs zu Microservices wissen sollten
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
CodeFluent Entities and AppSofa
CodeFluent Entities and AppSofaCodeFluent Entities and AppSofa
CodeFluent Entities and AppSofa
 

AngularJS