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:
<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>
this bootstraps our application. value usersApp corresponds to our main application module (coming soon).
this is container div that will contain different markup, based on page user is currently viewing.
- 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.
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.