AngularJS with Spring MVC – REST way

Introduction

Ladies & Gents, let’s get started!

Goal is to build AngularJS powered CRUD application that communicates with Spring MVC Rest server. Demo is based on very simple model, including simple user data. App has just basing CSS styling (design is not intention here). We’ll build the following screens:

Angular part

 We have shell HTML page (index.html), such as the one below. This page is ‘shell page’, being loaded only initially. It contains multiple javascript imports (AngularJS required libraries, as well as some custom javascript files. Mostly, it is enough to just import angular.js library. But, since we’re using routing (navigation related) and resources (REST related), we needed to include appropriate libraries: angular-route.js and angular-resource.js. During development, we should use uncompressed versions, and switch them with compressed ones when production ready (non-compressed provide us better logging).

<html data-ng-app="usersApp">
<head>
    <meta charset="UTF-8">
    <title data-ng-bind="$root.title"></title>
    <link rel="stylesheet" href="res/css/style.css" type="text/css"/>
</head>
<body>
http://localhost/res/js/angular.js 
http://localhost/res/js/angular-route.js
http://localhost/res/js/angular-resource.js
http://localhost/res/js/app.js
http://localhost/res/js/controllers.js
http://localhost/res/js/services.js
http://localhost/res/js/constants.js
</body>
</html>
Shell page is loaded only once, and has one special divtht gets it’s content changed, based on user interaction.
Important:
data-ng-app:
this bootstraps our application. value usersApp corresponds to our main application module (coming soon).
data-ng-view:
this is container div that will contain different markup, based on page user is currently viewing.
3 bolded javascript sources represent libraries downloaded from Angular website (https://angularjs.org/). For most cases, including only basic angular.js will be just fine. Since we are using routing AngularJS feature, we included angular-routing.js file. Also, we are using the thing called Resource, which simplifies client side of rest communication,and to use that, we include angular-resource.js file.

    There are a few custom javascript files, used throughout application. Good approach is to separate angular components in different modules, for easier maintenance process (each module here is separate javascript file).

  • app.js – main application module. The most important part is routing configuration. Pages navigation is based on URL hash being changed. E.g …./index.html#/users to …./index.html#/users/1. By changing URL hash, there’s no page reload, but AngularJS is capable of detecting those changes, and act upon it (change page fragment currently being displayed to the user) . Also, in order to support cross domain ajax communication, we configure that as well in angular’s config method. Also, server side (Spring REST) is configure to support all the origins JSON requests are coming from (special filter has been built to support that).
  • controllers.js – application submodule, containing only controller, angular component type. Controller angular component type is responsible for calling service component to gather data (in json format) and make it available to view responsible for data display.
  • services.js – application sub-module, containing only services, angular component type. Services are responsible for actually making calls to API server and get application data. Services are built as AngularJS factories, one of few possible choices. We’re using $resource API to simplify REST client side development. That eliminates much of redundant code.
  • constants.js – application sub-module, containing only constants, angular component type. We can set any kind of application constants in this file.  We’re configuring Server URL that is actually our REST server endpoint.

 Database

Given is the simplest possible database schema:

CREATE TABLE `Users`
(
   id        int(10),
   name      varchar(30),
   country   varchar(30),
   surname   varchar(30)
);

Server side (Spring MVC – REST)

Server side is built upon Spring MVC, in Rest fashion. Main application controller, taking care of Rest communication is: UsersController.java. Application uses JPA (Hibernate implementation) for database layer.I’ve used Eclipse Kepler as IDE. There’s Spring plugin installed inside, for simplifying Spring development. I was testing application in Tomcat 7 (using Tomcat Eclipse adapter). In /RestJPA/sql/ddl.sql there’s database schema, so that you can create sample database (I’m using MySQL locally).

For writing server side, we don’t need to use Spring MVC actually. Java EE 7 compliant application server contains Rest libraries ready, and using provided annotations, you can easily build server side in REST manner.

Hope you liked my post! 🙂

You can find entire project here: download link

Stay tuned and please – don’t forget to subscribe in case you’re eager to find out what’s coming next in upcoming posts.

Advertisements

3 thoughts on “AngularJS with Spring MVC – REST way

  1. Pingback: Building AngularJS application with MongoDB and database data sources | Dusan Odalovic's Blog
  2. Pingback: Building an AngularJS Application with MongoDB & Database Data Sources | Voxxed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s