A sample AngularJs /Spring MVC app
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
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.
The following dependencies are necessary:
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:
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
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 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.
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).
The REST API of the backend is composed of 3 services:
|/authenticate||POST||authenticates the user|
|/logout||POST||ends the current session|
|/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||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|
This snapshot shows the test code coverage for the app package:
Clone this repository, install nodejs and bower and on the root of the repository run this command:
Then run one of the maven commands bellow.
This command starts the application with a local postgresql database:
mvn clean install tomcat7:run-war -Dspring.profiles.active=development
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:
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.