Spring MVC angularjs example

n this tutorial, we will see Spring MVC angularjs example.

Spring MVC tutorial:

In this post, we will create Spring MVC REST APIs and perform CRUD operations using AngularJs by calling REST APIs.

Github Source code:

Here are steps to create a simple Spring Rest API which will provide CRUD opertions and angularJS to call Spring MVC APIs.

1) Create a dynamic web project using maven in eclipse named “AngularjsSpringRestExample”

Maven dependencies

2)Now create pom.xml as follows:

pom.xml

Application configuration:

3) create web.xml as below:


4) 
create a xml file named springrest-servlet.xml in /WEB-INF/ folder.
Please change context:component-scan if you want to use different package for spring to search for controller.Please refer to spring mvc hello world examplefor more understanding.

Create bean class

5) Create a bean name “Country.java” in org.arpit.java2blog.bean.

Create Controller

6) Create a controller named “CountryController.java” in package org.arpit.java2blog.controller

Create Service class

7) Create a class CountryService.java in package org.arpit.java2blog.service
It is just a helper class which should be replaced by database implementation. It is not very well written class, it is just used for demonstration.

AngularJS view

8) create angularJSCrudExample.html in WebContent folder with following content:

Explanation :

    • We have injected $http as we have done in ajax example through controller constructor.
    • We have defined various methods depending on operations such as editCountry, deleteCountry, submitCountry
    • When you click on submit button on form, it actually calls POST or PUT depending on operation. If you click on edit and submit data then it will be put operation as it will be update on existing resource. If you directly submit data, then it will be POST operation to create new resource,
    • Every time you submit data, it calls refereshCountryData() to refresh country table below.
    • When you call $http, you need to pass method type and URL, it will call it according, You can either put absolute URL or relative URL with respect to context root of web application.

9) It ‘s time to do maven build.

Right click on project -> Run as -> Maven build

10) Provide goals as clean install (given below) and click on run

Run the application

10) Right click on angularJSCrudExample.html -> run as -> run on server
Select apache tomcat and click on finish
11) You should be able to see below page
URL : “http://localhost:8080/AngularjsJAXRSCRUDExample/angularJSCrudExample.html”


Lets click on delete button corresponding to Nepal and you will see below screen:

Lets add new country France with population 15000

Click on submit and you will see below screen.

Now click on edit button corresponding to India and change population from 10000 to 100000.

Click on submit and you will see below screen:

Lets check Get method for Rest API

12) Test your get method REST service
URL :“http://localhost:8080/AngularjsSpringRestExample/countries/”.

You will get following output:

As you can see , all changes have been reflected in above get call.

Project structure:

Spring MVC angularjs project structure


We are done with Spring MVC angularjs example.If you are still facing any issue, please comment.


import_contacts

You may also like:


import_contacts

You may also like:

Related Posts

  • 10 July

    Spring MVC tutorial

    In this post, we will learn about Spring MVC tutorial. Spring MVC framework is a robust Model view controller framework which helps us to develop a loosely coupled web application. It separates different aspects of web applications with the help of MVC architecture. Model: Model carries application data. It generally includes POJO in the form […]

  • 13 September

    Spring MVC + Spring Data + Hibernate + MySQL example

    In this post, we are going to see integration of Spring MVC,Spring Data,hibernate and mysql CRUD example. We have already seen Spring MVC, hibernate and mysql example in previous tutorial. Spring Data JPA provides CRUD API, so you don’t have to write boiler plate code. You just need to create repository interface and spring will provide […]

  • 26 August

    Spring MVC Exceptional Handling using @ControllerAdvice example

    In this post , we will see how to do exceptional handling in Spring MVC using @ControllerAdvice. In previous post, we have already seen how to use @ExceptionHandler to handle exceptions but @ExceptionHandler can be applied to one controller only but what if you want to handle exception globally i.e. across multiple controller. You can use @ControllerAdvice to handle […]

  • 26 August

    Spring MVC Exceptional Handling using @ExceptionHandler example

    In this post , we will see how to do exceptional handling in Spring MVC using @ExceptionalHandler. You can use @ExceptionHandler to redirect to error view when exception occurs. Lets understand this with the help of example: Source code: Download click to begin 20KB .zip 1) Create a dynamic web project using maven in eclipse named “SpringMVCExceptionalHandlerExample” Maven dependencies 2) Our […]

  • 25 August

    Spring MVC Hibernate MySQL CRUD example

    In this post, we are going to see integration of Spring MVC, hibernate and mysql CRUD example. We have already seen integration of Spring Rest with hibernate in previous tutorial. Spring MVC Tutorial Spring MVC hello world example Spring MVC Hibernate MySQL example Spring MVC Spring Data example Spring MVC Interceptor example Spring MVC angularjs […]

  • 23 August

    Spring MVC + log4j example

    In this post, we will see how to integrate Spring MVC with log4j. Spring MVC tutorial: Spring MVC hello world example Spring MVC Hibernate MySQL example Spring MVC interceptor example Spring MVC angularjs example Spring MVC @RequestMapping example Spring Component,Service, Repository and Controller example Spring MVC @ModelAttribute annotation example Spring MVC @RestController annotation example Spring […]

Leave a Reply

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

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.