javascript applicaties voor enterprise met angularjs

Teun Hakvoort

Much demo – few slides.

I’m

• Teun Hakvoort• Trainer / Consultant• teunh@infosupport.com m

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