$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
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:
4.0.0 com.javasampleapproach.angularjs angularjs 0.0.1 jar SpringBootAngularJs SpringBoot Angularjs org.springframework.boot spring-boot-starter-parent 1.4.2.RELEASE UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin
2. Create a simple model
Create a Customer model:
package com.javasampleapproach.angularjs.model; public class Customer { private String firstname; private String lastname; public Customer(){} public Customer(String firstname, String lastname){ this.firstname = firstname; this.lastname = lastname; } // firstname public String getFirstname() { return firstname; } public void setFirstname(String firstname) { this.firstname = firstname; } // lastname public String getLastname() { return lastname; } public void setLastname(String lastname) { this.lastname = lastname; } }
3. Create a Controller
– Create a simple controller for providing an index.html view
package com.javasampleapproach.angularjs.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; @Controller public class WebController { @RequestMapping(value="/",method = RequestMethod.GET) public String homepage(){ return "index"; } }
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.
package com.javasampleapproach.angularjs.controller; import java.util.ArrayList; import java.util.List; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import com.javasampleapproach.angularjs.model.Customer; @RestController public class RestWebController { Listcust = new ArrayList (); @RequestMapping(value = "/getallcustomer", method = RequestMethod.GET) public List getResource(){ return cust; } @RequestMapping(value="/postcustomer", method=RequestMethod.POST) public String postCustomer(@RequestBody Customer customer){ cust.add(customer); return "Sucessful!"; } }
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:
Spring Boot - Angularjs Example %MINIFYHTMLaf6e57168f171e3ddf89c7650c82616a16%%MINIFYHTMLaf6e57168f171e3ddf89c7650c82616a17%%MINIFYHTMLaf6e57168f171e3ddf89c7650c82616a20%Http Angularjs With SpringBoot Example
%MINIFYHTMLaf6e57168f171e3ddf89c7650c82616a18% %MINIFYHTMLaf6e57168f171e3ddf89c7650c82616a19%{{postResultMessage}}
- {{cust.firstname + " " + cust.lastname}}
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
$http.post(‘/someUrl’, data, config).then(successCallback, errorCallback);
– GET method to get all customers from server with url: /getallcustomer
$http.get(‘/someUrl’, config).then(successCallback, errorCallback);
var app = angular.module('app', []); app.controller('postcontroller', function($scope, $http, $location) { $scope.submitForm = function(){ var url = $location.absUrl() + "postcustomer"; var config = { headers : { 'Accept': 'text/plain' } } var data = { firstname: $scope.firstname, lastname: $scope.lastname }; $http.post(url, data, config).then(function (response) { $scope.postResultMessage = response.data; }, function error(response) { $scope.postResultMessage = "Error with status: " + response.statusText; }); $scope.firstname = ""; $scope.lastname = ""; } }); app.controller('getcontroller', function($scope, $http, $location) { $scope.getfunction = function(){ var url = $location.absUrl() + "getallcustomer"; $http.get(url).then(function (response) { $scope.response = response.data }, function error(response) { $scope.postResultMessage = "Error with status: " + response.statusText; }); } });
7. Run & Check result
Run Spring Boot Application and check result:
IV. Sourcecode
Last updated on November 8, 2017.
Hi!
Could you please aslo show how to make a delete funcionality?
Thanks a lot for this tutorial!
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
:Regards,
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:
HTML:
CONTROLLER.JS
and RestWebCotroller:
Sorry, the HTML is:
Which client do you want to delete? (id)
Remove
{{deleteResultMessage}}
Ahhhhh, once i post the comment =my html code changes. Last attempt, of course in the programm i have “”:
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
Solution:
Everything works now, thanks!
How can i run this project in eclipse maven?
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
}Hi, should you please show us how to do the remember-me functionnality from angular js to spring boot? Thanks in advance.
Hello Imen,
We will do it!
At this time, You can refer more at: How to configure Persistent Token Remember-Me authentication
Regards,
JSA
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.
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 SecurityConfigWeb.java:
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.
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
Regards,
JSA
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
Thanks.
Can you please send me your source code. I am struggling with creating a login page.
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){
System.out.println(customer);
//cust.add(customer);
return “Sucessful!”;
}
and the output is correct:
{“firstname”:”dfgdg”,”lastname”:”dfdfg”}
What is going wrong?
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
@ResponseBody
@PutMapping(“/update/{id}”)
public update updateCust(@PathVariable(value = “id”) Long Id) {
Customer cust = repository.findById(Id);
cust.setfirstName(cust.getfirstName());
cust.setlastName(cust.getlastName());
Note updatedNote = repository.save(cust);
return updatedNote;
}
Can you please help me to create a login page . I am new to this.
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.