Spring MVC | AngularJs Sample App
A sample project to demonstrate how a web app can be built using a Spring MVC / AngularJs stack. The frontend is based on Angular, lodash and requirejs, and the backend is composed of JSON REST web services based on Spring MVC / JPA, secured with Spring Security. See a further description of the app on this blog post.
Installation dependencies
The following dependencies are necessary:
- Java 8
- Node 0.12 or higher
- bower
- maven 3
Installing frontend dependencies
After cloning the repository, the following command installs the Javascript dependencies:
bower install
Building and starting the server
To build the backend and start the server, run the following command on the root folder of the repository:
mvn clean install tomcat7:run-war -Dspring.profiles.active=test
The spring test profile will activate an in-memory database. After the server starts, the application is accessible at the following URL:
http://localhost:8080/
To see a user with existing data (16 meals, 8 days from 1st of January 2015 to the 8th), login with the following credentials:
username: test123 / password: Password2
Frontend Overview
The sample project is a web application with an AngularJs-based frontend and a Spring/Hibernate based backend. The application is responsive, as it adapts to different screen sizes.
On the frontend, these libraries where used (besides Angular): Yahoo PureCss (pure CSS baseline) and lodash for functional data manipulation. The module system require.js was used to load frontend dependencies. The dependencies where obtained via bower.
The angular module angular-messages was used for frontend form validation, and this jQuery plugin was used as the datetimepicker component.
Backend Overview
The backend is based on Java 8, Spring 4, JPA 2/ Hibernate 4. The Spring configuration is based on Java. The main Spring modules used where Spring MVC and Spring Security. The backend was built using the DDD approach, which includes a domain model, services, repositories and DTOs for frontend/backend data transfer.
The REST web services are based on Spring MVC and JSON. The unit tests are made with spring test and the REST API functional tests where made using Spring test MVC.
Backend Security
The Spring Security module was used to secure the REST backend (these guidelines are in general applied). The application can be made to run in HTTPS-only mode via a server parameter, meaning no pages will be served if the user tries to access it via HTTP.
The Spring Security Form Login mode was used, with fallback to HTTP-Basic Authentication for non-browser based HTTP clients. Protection is in-place against CSRF (cross-site request forgery).
Frontend validations are for user convenience only, and where also made on the backend. The use of Angular gives good protection against common problems like cross-site scripting or HTML injection. The queries on the backend are made using either named queries or the criteria API, which gives good protection against SQL injection.
The password policy is of at least 6 characters with minimum one lower case, one upper case and one numeric. The passwords are not stored in the database in plain text but in a digested form, using the Spring Security Bcrypt password encoder (transparently includes a salt).
REST API
The REST API of the backend is composed of 3 services:
Authentication Service
| Url | Verb | Description |
|---|---|---|
| /authenticate | POST | authenticates the user |
| /logout | POST | ends the current session |
User Service
| Url | Verb | Description |
|---|---|---|
| /user | GET | retrieves info for the currently logged-in user (number of calories of today, etc.) |
| /user | PUT | Used to save the user max calories per day |
| /user | POST | creates a new user |
Meal Service
| Url | Verb | Description |
|---|---|---|
| /meal | GET | searches meals for the current user by date/time |
| /meal | POST | saves a modified set of meals, might included new ones |
| /meal | DELETE | deletes a set of meals |
Testing code coverage
This snapshot shows the test code coverage for the app package:
Installation instructions
Clone this repository, install nodejs and bower and on the root of the repository run this command:
bower install
Then run one of the maven commands bellow.
How to run the project against a PostgreSQL database
This command starts the application with a local postgresql database:
mvn clean install tomcat7:run-war -Dspring.profiles.active=development
How to run the project in HTTPS-only mode
The application can be started in HTTPS only mode by using the flag httpsOnly=true. This works in both modes, this is an example of how to start the application in test mode and HTTPS only:
mvn clean install tomcat7:run-war -Dspring.profiles.active=test -DhttpsOnly=true
The project can be accessed via this URL:
https://localhost:8443/
A warning message is displayed because the test certificate is not accepted by the browser, by accepting the certificate the login page is then displayed.