$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
Contents
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:
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.javasampleapproach.angularjs</groupId> <artifactId>angularjs</artifactId> <version>0.0.1</version> <packaging>jar</packaging> <name>SpringBootAngularJs</name> <description>SpringBoot Angularjs</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.4.2.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> |
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 { List<Customer> cust = new ArrayList<Customer>(); @RequestMapping(value = "/getallcustomer", method = RequestMethod.GET) public List<Customer> 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:
<!DOCTYPE HTML> <html> <head> <title>Spring Boot - Angularjs Example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="/js/controller.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <div class="container" ng-app="app"> <h3 style="color:blue">Http Angularjs With SpringBoot Example</h3> <div ng-controller="postcontroller"> <form class="form-horizontal" name="customerForm" ng-submit="submitForm()"> <div class="form-group"> <label class="control-label col-sm-2" for="firstnameID">FirstName:</label> <div class="col-sm-5"> <input type="text" class="form-control" name="firstname" id="firstnameID" placeholder="Enter FirstName" ng-model="firstname"/> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="lastnameID">LastName:</label> <div class="col-sm-5"> <input type="text" class="form-control" name="lastname" id="lastnameID" placeholder="Enter LastName" ng-model="lastname"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> <div class="col-sm-offset-2 col-sm-10"> <p>{{postResultMessage}}</p> </div> </div> <div class="col-sm-offset-2 col-sm-10" ng-controller="getcontroller"> <button id="btn-id" type="button" class="btn btn-primary" ng-click="getfunction()">Get All Customers</button> <ul> <li ng-repeat="cust in response">{{cust.firstname + " " + cust.lastname}}</li> </ul> </div> </div> </body> </html> |
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.