How to integrate Http Angularjs with Spring MVC | Spring Boot

$http is an AngularJS service for communication with remote servers. In the article, JavaSampleApproach will show you way to integrate Http AngularJs and Spring Boot.

Related Articles:
How to configure AngularJs – SpringBoot
How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite
MultipartFile – How to create Spring AngularJs MultipartFile application to download/upload files | SpringBoot + AngularJs + Bootstrap.
AngularJs POST-GET Nested Objects to SpringBoot server
AngularJs POST-GET LIST Objects to SpringBoot server

I. Technologies for Http Angularjs and Spring Boot article

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE
– AngularJS
– BootStrap

II. Overview
1. Project Structure

http angularjs spring boot - project structure

2. Step to do

– Create SpringBoot project
– Create a simple model
– Create a Controller
– Create a RestController
– Create a index.html page
– Create an angularjs controller with GET & POST methods
– Run & Check result

III. Practices
1. Create SpringBoot project

– Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
For Template Engines, choose Thymeleaf
For Web MVC, choose Web->Web


Open pom.xml file and check needed dependencies:

2. Create a simple model

Create a Customer model:

3. Create a Controller

– Create a simple controller for providing an index.html view

4. Create a RestController

Create a RestController with 2 RequestMapping:
GET request method that returns all customers.
POST request method that uses for adding a new customer.

5. Create an index.html page

Create a simple index.html page with a form for posting a customer to server, and a button for getting all customers from remote server.

User Bootstrap & Angularjs:

6. Create an angularjs controller with GET & POST methods

Create an angular controller file with 2 methods:
POST method to post a customer’s info to server with url: /postcustomer
$‘/someUrl’, data, config).then(successCallback, errorCallback);

GET method to get all customers from server with url: /getallcustomer
$http.get(‘/someUrl’, config).then(successCallback, errorCallback);

7. Run & Check result

Run Spring Boot Application and check result:
http angularjs spring boot result

IV. Sourcecode


By grokonez | December 28, 2016.

Last updated on November 8, 2017.

Related Posts

20 thoughts on “How to integrate Http Angularjs with Spring MVC | Spring Boot”

    1. Hi,

      You can do an http DELETE via an URL /customer/delete/{id} and AngularJs’s $http.delete function.

      In the Spring’s Controller, You need implement a new request mapping with annotation @DeleteMapping:


      1. Thank you!
        Although I still have some problems, could you help me out?
        I think something is still wrong with passing the path variable, i keep getting deleteResultMessage=”Failed”
        Here is my code:



        and RestWebCotroller:

          1. Ahhhhh, once i post the comment =my html code changes. Last attempt, of course in the programm i have “”:

          2. Hi,

            1. Firstly, please check again your url request:
            -> Your URL: var url = $location.absUrl() + "delete" + id;
            Correct is: var url = $location.absUrl() + "delete/" + id;

            2. Second:

            Default AngularJS with headers: 'Accept': 'application/json'
            Your controller returns a String format.

            -> Your’s Problem


    1. Hi,

      You can open a Eclipse Terminal by right click on the project -> Show in Local Terminal -> Terminal or Ctrl + Alt + T

      Then use the command-lines to build and run Spring Boot project: {mvn clean install, mvn spring-boot:run}

      1. ok thanks really. Really it is a wonderfull article.I try to do it but i don’t succeded and my problem in angular js how to pass parameters from js to spring boot security.

  1. Hi,

    I also try to implement the remember-me feature with angular js and spring boot but i didn’t succeded: this is the first part of my back end my

    but for the front end angular js: this is my login.jsp
    Stay Logged In

    but for the loginservice.js and loginController.js i don’t succeded.

    Really, i need it please could you help me ?
    Thanks in advance.

    1. Hello Vincent,

      You can follow the guide steps as below:

      1. Create AngularJs Controller for login, logout functions:

      2. Create a GET RestAPI for userInfo


      1. I do that this is my loginController:

        This is my login.jsp for remember-me:
        Stay Logged In, my problem is my remember-me feature , i don’t succeeded to do it ,could you help me


  2. Hi, I’m new in AngularJS and Spring. Can you help me to understand why I get customer null in postcustomer method?
    I tried to change the method input to String:

    @RequestMapping(value=”/postcustomer”, method=RequestMethod.POST)
    public String postCustomer(@RequestBody String customer){

    return “Sucessful!”;

    and the output is correct:


    What is going wrong?

  3. Hello

    I was bit confuse how to update any entries onclick of Edit function , Please someone help
    I am using this mapping for update in restcontroller

    public update updateCust(@PathVariable(value = “id”) Long Id) {

    Customer cust = repository.findById(Id);


    Note updatedNote =;
    return updatedNote;

  4. how do i format the {{postResultMessage}}
    If my message is “success !! Thanks for using!!!”
    and If I insert line breaks like “success!! Thanks for using!!!”

    The page displays “success!! Thanks for using!!!” it does not honor tags.

Got Something To Say:

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