Powering Up With Jax-rs and Angular!!

September 04, 2016

Powering Up With Jax-rs and Angular!!

Some Past...

The web has become a place for more interaction rather than delivering static information. It has been a while since the web sites were build using pure html, with the new Social Networking era coming out the web was highly interactive and required to serve request in millions.

In order to cater the above requirements, the interactivity the systems were build on top of more powerful servers with different technologies. Other than the technologies being new, a more robust architecture was required enabling the developers to cope with the changing requirements and maintaining the systems for a long time with minimal downtime.

Talking about the legacy systems like CORBA (Common Object Request Broker Architecture) which was defined by the OMG (Object Management Group, well they define UML too) in a gist it was a platform which enabled different system to talk, a protocol indeed. It used interface definition language (IDL). This itself had a disadvantage on CORBA's life, interested? read,
https://en.wikipedia.org/wiki/Common_Object_Request_Broker_Architecture#Problems_and_criticism

There are other note worthy architectures such as SOAP (Simple Object Access Protocol), which used XML and our beloved REST which uses JSON. REST is request based and most often no sessions are kept, rather serve the request based on its content and headers. REST is fast because of the used frameworks and the simple object format JSON, which has stripped of lengthy XML tags which SOAP used.

Why Angular!

Most of us do love simple template based web frameworks such as Laravel, Symfony and even JSP with a bit of twisting tags. But every time a click is made the page loads, which means basically everything other than that is cached would be resend from the server. At least 304 (Not modified) checks would be performed at the server side for cached content.

Then comes AJAX (Asynchronous Javascript and XML, well we use JSON) for querying small chunks of data for search suggestions and form auto fills to make the user experience a little better. Based on the same concept we load views, using Angular. Angular provides a set of features which makes the life easy for the developer in terms of

Management of scopes, without having this dealing with var keyword (javascript variables) was a bit messy.
Routing being built in.
Easy to use templates using curly braces (handlebars).
Most beloved ng-repeat, find out you'll love it.

some stuff you won't like,

Use of hash bags

Urls are displayed as www.example.com/#/my-page/?request=name
This is used to block the request at the domain and handle the rest of the routing with hash bagged content, now we have HTML 5 and that's what I'll be talking today!

Let's make a handy angular application with pretty urls (www.example.com/my-page/anuradhawick).

We'll be using JAVA with Jax-rs for the REST API and Jersy Servelet for routing the API calls.

Steps and Sample Code!

MVN dependencies

Since we are planning to use HTML 5 we need to make our routes to point to a single JSP file.

All the requests are pinted to the app.jsp, in this jsp file we include the required html pages to be loaded <%@include file="index.html"%>

Within this HTML file we must define the base for all the routes, usually we define this in the header.

<html ng-app="app-name">
<head>
    <title>My App</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
    <base href="/angular-app/">
</head>

Using the controller. This is placed inside the index.html file

<section class="content">
    <div ng-controller="MainController">
        <div class="box">
            // Your HTML components and stuff
        </div>
    </div>
</section>

Defining the controller

var app = angular.module('app-name', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/route-1', {
            templateUrl: '/route1.html',
        })
        .when('/route-2', {
            templateUrl: '/route2.html',
        });

    // This line will make our app HTML5
    $locationProvider.html5Mode(true);
});
// our controller
angular.module('app-name').controller('MainController', function ($route, $routeParams, $location) {
    this.$route = $route;
    this.$location = $location;
    this.$routeParams = $routeParams;

    // what ever the methods should go here

});

Special Notes

The routes and the folder structure must have different name, because the html content loaded by the angular app should be rendered with GET requests from the server and shall not be routed away, may cause recursive calls crashing the app.
Base URL must be define, this is where we get pointed when the page is reloaded from address bar.
Always use different names for api end points and folder structures. This masks our internal file structure and isolate the resource routes from api routes, good for security and application functionality will not be affected.
Use comments and code with good quality, don't be lazy to use a minifying/ uglifying framework to make your web application a bit more lighter.

References
https://angularjs.org
https://en.wikipedia.org/wiki/Common_Object_Request_Broker_Architecture