In this example, we will learn how to get the json data from rest service controller from Spring and display using the ng-model attribute of angular JS.
Spring RestController returns the Customer java object in JSON format and data is displayed on UI using angular JS. Call to the rest api is done using the $http of angular JS.
Following components will be used
1) Spring RestController
2) Angular JS ng-app
3) Angular JS ng-controller
4) Angular JS ng-model
5) Angular JS $http
Here are the files that are used.
Customer.java
package com.accenture.restviability.pojo; public class Customer { private String name; private String id; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getId() { return id; } public void setId(String id) { this.id = id; } }
SpringRestController
package com.accenture.restviability.controller; import java.util.ArrayList; import java.util.List; import org.springframework.http.HttpStatus; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import com.accenture.restviability.pojo.Customer; import com.google.gson.Gson; @RestController() @CrossOrigin(maxAge = 3600) public class SpringRestController { @RequestMapping(method = RequestMethod.GET, path = "/customers", produces = MediaType.APPLICATION_JSON_VALUE) public ResponseEntity<Customer> getCustomers() { System.out.println("Entered in Get Customers"); List<Customer> customers = new ArrayList<Customer>(); Customer customer = new Customer(); customer.setName("Kumar"); customer.setId("1"); Gson gson = new Gson(); return new ResponseEntity<Customer>(customer, HttpStatus.OK); } }
customer.jsp
<!DOCTYPE html> <html ng-app="customerApp"> <head> <title>Customer App</title> <script src="js/angular.js"></script> <script src="js/customerController.js"></script> <script src="js/jquery.min.js"></script> </head> <body> <div ng-controller="customerController"> <p> Customer Id - <input type="text" ng-model="customer.id" /> </p> <p> Customer Name - <input type="text" ng-model="customer.name" /> </p> </div> </body> </html>
customerController.js
var app = angular.module('customerApp', []); app.controller("customerController", function($scope, $http) { $http.get('http://localhost:8070/customers').then( function successCallback(response) { $scope.customer = {name: response.data.name, id: response.data.id}; }, function errorCallback(response) { }); });
No comments:
Post a Comment