JavaScript applicaties voor Enterprise met AngularJS

3,989 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,989
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript applicaties voor Enterprise met AngularJS

  1. 1. Teun Hakvoort Much demo – few slides.
  2. 2. I’m • • • Teun Hakvoort Trainer / Consultant teunh@infosupport.com m
  3. 3. UI UI logic logic The Idea JAX-RS
  4. 4. Types of frameworks http://www.aadip9.net/freeway.jpg
  5. 5. deployment
  6. 6. Two projects Project with static Project with static content content -JavaScript -JavaScript -CSS -CSS -HTML files -HTML files What type of What type of project is this? project is this? Web Application Web Application (WAR) (WAR) with with JAX-RS services JAX-RS services
  7. 7. Web Fragments • Since the servlet 3.0 specification – Web Resources can exist in external Jar files • Web archive structure: Content Web Application Content Web Application (WAR) (WAR) Static content JAR Static content JAR WEB-INF WEB-INF META-INF META-INF Classes Classes JAX-RS classes JAX-RS classes resources resources JavaScript JavaScript Static content JAR Static content JAR Other depencencies Other depencencies CSS CSS HTML HTML
  8. 8. build integration
  9. 9. How to develop in application server? • Every JavaScript change a redeploy? – NO! Life reload Life reload Application server Application server Node JS server for JavaScript Node JS server for JavaScript With GRUNT With GRUNT Static JavaScript Static JavaScript content content JAX-RS application JAX-RS application JAX-RS calls JAX-RS calls
  10. 10. Build integration • Running by Maven • In the Maven bootstraps the Grunt build – Minimizing JavaScript files – Bundling JavaScript – Optimizing images
  11. 11. Security
  12. 12. Configuring services var demoModule = angular.module('demoApp', []); var demoModule = angular.module('demoApp', []); demoModule.config(function ($routeProvider) { demoModule.config(function ($routeProvider) { $routeProvider $routeProvider .when('/start', { .when('/start', {   templateUrl: 'partials/start/start.html',   templateUrl: 'partials/start/start.html',   controller: 'StartController'   controller: 'StartController' }) }) ... ... .otherwise({ redirectTo: '/start' }); .otherwise({ redirectTo: '/start' }); }); }); 12
  13. 13. AngularJS AJAX: Abstraction levels • AngularJS has extensive support for AJAX – With the $http service, you can make AJAX calls – The $resource service is for making RESTful AJAX calls For addressing REST services For non-RESTful AJAX requests Not for use in production code, this used is for testing 13
  14. 14. Security mechanism • Intercept every request • Check http status code • if Forbidden, redirect to login page
  15. 15. Demo Security
  16. 16. modularity
  17. 17. Modularity Module file Module file APP config APP config Controllers Controllers DataAccess DataAccess Domain Domain
  18. 18. Modularity Demo
  19. 19. internationalization
  20. 20. i18n • Not default available in AngularJS • Then use another framework – i18next • Are there AngularJS directives?
  21. 21. i18n • Not default available in AngularJS • Then use another framework – i18next • Are there AngularJS directives? – ng-i18next
  22. 22. i18n • Configure languages • JSON files for messages • ng-i18next="teksten.taak"
  23. 23. Logging and exception handling
  24. 24. Setup • Configure AngularJS exception handler • Create log service
  25. 25. Thanks! github.com/teunh/jfall2013

×