javascript applicaties voor enterprise met angularjs
TRANSCRIPT
Teun Hakvoort
Much demo – few slides.
The IdeaUI
logicUI
logic
JAX-RS
Types of frameworks
http://www.aadip9.net/freeway.jpg
deployment
Two projects
Web Application (WAR)
with
JAX-RS services
Web Application (WAR)
with
JAX-RS services
Project with static content
-JavaScript-CSS-HTML files
Project with static content
-JavaScript-CSS-HTML files
What type of project is this?What type of
project is this?
Web Fragments
• Since the servlet 3.0 specification – Web Resources can exist in external Jar files
• Web archive structure:Content Web Application
(WAR)Content Web Application
(WAR)
WEB-INFWEB-INF
ClassesJAX-RS classes
ClassesJAX-RS classes
Other depencenciesOther depencencies
Static content JARStatic content JAR
META-INFMETA-INF
resourcesresources
JavaScriptJavaScript
CSSCSS
HTMLHTML
Static content JARStatic content JAR
build integration
How to develop in application server?
• Every JavaScript change a redeploy?– NO!
Application serverApplication server
JAX-RS applicationJAX-RS application
Node JS server for JavaScriptWith GRUNT
Node JS server for JavaScriptWith GRUNT
Static JavaScript content
Static JavaScript content JAX-RS callsJAX-RS calls
Life reloadLife reload
Build integration
• Running by Maven• In the Maven bootstraps the Grunt build– Minimizing JavaScript files– Bundling JavaScript– Optimizing images
Security
Configuring services
12
var demoModule = angular.module('demoApp', []);demoModule.config(function ($routeProvider) {
$routeProvider.when('/start', {
templateUrl: 'partials/start/start.html', controller: 'StartController'
})....otherwise({ redirectTo: '/start' });
});
var demoModule = angular.module('demoApp', []);demoModule.config(function ($routeProvider) {
$routeProvider.when('/start', {
templateUrl: 'partials/start/start.html', controller: 'StartController'
})....otherwise({ redirectTo: '/start' });
});
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
13
Not for use in production
code, this used is for testing
For addressing REST services
For non-RESTful AJAX requests
Security mechanism
• Intercept every request• Check http status code • if Forbidden, redirect to login page
Demo Security
modularity
Modularity
Module fileModule file
APP configAPP config ControllersControllers
DataAccessDataAccess DomainDomain
Modularity Demo
internationalization
i18n
• Not default available in AngularJS• Then use another framework– i18next
• Are there AngularJS directives?
i18n
• Not default available in AngularJS• Then use another framework– i18next
• Are there AngularJS directives?– ng-i18next
i18n
• Configure languages• JSON files for messages• ng-i18next="teksten.taak"
Logging and exception handling
Setup
• Configure AngularJS exception handler• Create log service
Thanks!
github.com/teunh/jfall2013