Complete Web Application: Angular Twitter Bootstrap Spring MVC, Data and Security


Posted on November 3, 2013 by

Share it now!

Hello, how are you?

Today we will see how to create a complete Java web application using Spring, Angular, JQuery, Twitter Bootstrap, Tiles, Maven, Tomcat, JPA/Hibernate.

The project that will be done here in this post will be used in another post that I will write, because of this future post, in this post will be described a detailed environment configuration. I will be using linux as my operational system (OS), but almost nothing will change if you use Windows or other OS.

I received a lot of emails asking for a post using Spring in a full web application, all the applications already posted here were using JEE technology (JSF, EJB, JPA). In this post we will see a project using Spring framework with the following modules: Spring MVC, SpringData e Spring Security. We will see how to do internationalization (i18n) with SpringMVC and templates with Tiles framework.

Postgre will be the database used here, but if you want use it with MySQL just add the MySQL jar to the project and change some configuration. In this post will be displayed both Postgre and MySQL configurations.

It is possible to find the source code of this project in the last page of this post, and to make everybody happy, 3 downloading ways will be available in the end of the post. In this post we will focus in the Spring/JPA code and some of the JPS code highlighting the Angular and Bootstrap libraries, all the JSP code, classes and configurations can be downloaded in the last page.

What we will see in here:

Page 02: Environment Setup
Page 03: Creating the project
Page 04: Understanding the “pom.xml”, “log4j.xml” and the “context.xml” files
Page 05: Creating the Spring and the project XMLs
Page 06: Tiles – Page templates
Page 07: Project Model Classes
Page 08: Using SpringData as Repository (DAO); creating User Service
Page 09: Using SpringData as Repository (DAO); creating Contact Service
Page 10: Creating the Controllers
Page 11: Using Restful approach with SpringMVC
Page 12: Understanding the Login, SpringMVC Interceptor and the Security Rules
Page 13: First Contact with Angular.js and the SpringMVC
Page 14: Using Angular.js bind in a HTML table
Page 15: Internationalization (i18n) with Spring
Page 16: Understanding the Twitter Bootstrap role
Page 17: Running the project

Let us get started!

Response to Complete Web Application: Angular Twitter Bootstrap Spring MVC, Data and Security

  1. santosh


    First of all I would say you did a great job of explaining entire application in a series of pages.Thank you for the efforts.

    I am having few basic questions regarding angular js and spring mvc for my new project. They are:

    1. Recently I came across angularjs and found it very interesting but i would like to know what are the additional benefits that we get when we use angular js for binding when compared to spring default binding and which one do you prefer for a new project.

    2.Is it scalable when we write entire application as restful and use angular js as front end and how much secure is that? or is there any other approach you can think of using angular js with bootstrap and spring mvc which makes my application scalable and secure.

    3. While researching on internet i found that bootstrap is not compatible with angular js to make them compatible we need to use angular-bootstrap js implementation. Did you face any issues for big projects with their compatibility?

    Could you please let me know these details that helps me a lot for designing my new project.


    • uaihebert Post author

      Hello Santosh, how are you?

      1) The Angular binding is about a bind between HTML and Javascript, is not related to the Spring Model Binding. I think you could use both
      2) Right now the project needs a http session. You could use a rest approach with token and your project would be scalable
      3) cannot help you about this issue, sorry.

      Thanks for passing by.

  2. marouen

    hello brother,

    your project is working very well in mysql using the Tomcat plugin like you described above, but i would like to add SPRING-TEST using @RunWith(SpringJUnit4ClassRunner.class)
    i created a new folder “usr/test/java”
    but, in the ContextConfigurator annotation, i didn’t know wich file i should put, when i tried “/context.xml” it doesn’t work for me, even when i copy all the xml files in “src/test/resources”.

    please, i need help to add TESTS module

    • uaihebert Post author

      Hello marouen,

      I am sorry but I do not have a sample here. I do know that you have to point where the file is.

      Thanks for passing by.

  3. Felipao Poá

    Hi, can I reuse pieces of these codes in a project that I’ll release as MIT license? There are any problems using CSS files, JS files, etc?

  4. Ricardo

    Good day, and great tutorial
    By any chance, do you know how or which would be the best way to implement junit’s test cases? (For trying queries or methods)

    • uaihebert Post author

      Ricardo, good night.

      I would use the Spring Test module.

      You can find several query results in the google searching for: “springmvc test”

      Thanks for passing by

  5. Avishay

    Thanks for a great post. I was looking for this combinations of technologies for a new project.
    The projects runs and displays the login page but I cannot log even though I have created two users in the database.
    Can you kindly send the exact values for these two rows for enabled, role, email , password?
    it refuses to log-in.
    Also, in your mind, what is the best way to intercept Spring security and see if it has any exceptions etc. while accessing the database?
    (tables where created ok in the DB)

    • uaihebert Post author

      Hello Avishay,

      I do not have a insert example, sorry.

      I followed the same steps of the post and it worked.

      Check the generated LOG or change its level to DEBUG, it may display what is wrong.

      Thanks for passing by.

  6. engin

    ı can try to angularJS alone js and html then write simple controller.js file call method in this file for example $scope.getConttactList(); but if ı call this method not working angularJS controller but delete this $scope.getConttactList(); my controller running. ı can’t understand that.

    • uaihebert Post author

      Hello Engin,

      I am sorry, but I could not understand your problem.

      It is hard do understand your problem without seeing your code. Post your doubt in the, they will check your code.

      Thanks for passing by.

    • uaihebert Post author

      João, good morning.

      Do you have your Maven correctly working?

      Is your Maven able to download new dependencies?

      Is the door 8080 allowed to run in your local firewall?

      Is there any error message?

      Thanks for passing by

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *