Das Dokument behandelt den Einsatz von AngularJS zur Entwicklung von Unternehmensanwendungen, betont die Komplexität und hohen Qualitätsanforderungen solcher Projekte und stellt AngularJS als ein effektives Werkzeug vor. Es erläutert die Strukturen und Methodologien, die von AngularJS bereitgestellt werden, einschließlich Modulen, Abhängigkeitsein injection und Testbarkeit. Zudem werden Werkzeuge für Testautomatisierung und kontinuierliche Integration wie Jenkins und SonarQube erwähnt.

1. BUILDING
ENTERPRISE APPLICATIONS
WITH ANGULARJS
Christian Janz (@c_janz)
christian.janz@bridging-it.de

2. Christian Janz
Consultant im Bereich Softwareentwicklung
Java/JEE, Web bei Bridging IT in Mannheim
@c_janz christian.janz@bridging-it.de http://de.slideshare.net/cjanz
Twitter: | E-Mail: | Slides:
| Code:
https://github.com/bridgingIT/angular-seed

3. Agenda
Enterprise Applications
Enterprise + JavaScript?
AngularJS
JavaScript Ökosystem
Continuous Integration
Fazit

4. Enterprise
Applications
Was ist besonders daran?

5. Enterprise Applications
unterstützen kritische
Geschäftsprozesse

6. Hohe Komplexität

7. Hohe Qualitätsanforderungen

9. Deadlines

10. Enterprise +
JavaScript?

11. “JavaScript ist doch für Animationen auf
Webseiten. Damit kann man keine
professionellen Geschäftsanwendungen
entwickeln.”

12. “Der JavaScript-Code hat keine Unit-Tests, das
geht nicht so einfach.”

13. Enterprise +
JavaScript!

14. AngularJS
HTML enhanced for web apps!
JavaScript-Framework von Google
Open Source (MIT)
MVW (Model-View-Whatever)

15. Features
Module
Dependency Injection
Trennung von View und Logik
Data Binding
Erweiterung von HTML
Testability

16. Building Blocks
Module
View
Route Definition
Controller
Service
Directive
Filter

17. Demo
InterpolateFilter + Unit Test
'use strict';
angular.module('myApp.version.interpolate-filter', [])
.filter('interpolate', ['version', function(version) {
return function(text) {
return String(text).replace(/%VERSION%/mg, version);
};
}]);

18. JavaScript
Ökosystem

19. Testing

20. Code Analysis

21. Package Management

22. Bower: Beispiel
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-route": "1.2.x",
"angular-loader": "1.2.x",
"angular-mocks": "~1.2.x",
"html5-boilerplate": "~4.3.0"
}
}

23. Task Runner

24. Demo: Gulp
[22:53:53] Using gulpfile ./angular-seed/gulpfile.js
[22:53:53] Starting 'test'...
INFO [karma]: Karma v0.12.24 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 38.0.2125 (Linux)]: Connected on socket P7CU4ehH9G-nJyq-796g with id 53690621
......
Chrome 38.0.2125 (Linux): Executed 6 of 6 SUCCESS (0.052 secs / 0.049 secs)
[22:53:55] Finished 'test' after 2.27 s
[22:53:55] Starting 'build'...
./angular-seed/app/view2/view2.js: line 4, col 3, Missing "use strict" statement.
1 error
events.js:72
throw er; // Unhandled 'error' event
^
Error: JSHint failed for: ./angular-seed/app/view2/view2.js

25. Continuous
Integration
Bringing it all together

26. Demo: Jenkins Job

27. Demo: Code-Analyse mit
SonarQube

28. Fazit

29. Mit AngularJS können
professionelle
Geschäftsanwendungen
entwickelt werden

30. Es gibt sehr gute Werkzeuge

31. Bewährte Methoden lassen
sich übertragen

32. Fragen?

33. Bildnachweise
https://www.flickr.com/photos/dominik99/384027019/
http://cdn.playbuzz.com/cdn/8ba53e3b-5c1b-4fe0-8d93-
f9586b7f4a97/73917b9f-1ced-41fd-8e97-986c8754a01c.jpg
http://commons.wikimedia.org/wiki/File:Neon_sign,_%22CHANGE%https://www.blossom.io/static/img/site/product-mgmt-anti-patterns/
office_space.jpg
http://commons.wikimedia.org/wiki/File:Space_Shuttle_Discovery_Transport.http://blog.shoeboxed.com/4-lessons-we-can-learn-from-the-movie-