angularjs restful api
The article presents concepts and code samples on how to consume RESTful APIs with help of AngularJS $resource or $http service. The server side code is written on top of Spring MVC framework. Please feel free to point out suggestions on this blog.Following are key techniques using which one could consumer RESTful APIs
One could directly use low-level $http service to consumer RESTful APIs using “GET” method as displayed in the code below. Pay attention to Spring MVC code where @PathVariable is used to receive the request based on URL template.
AngularJS Controller Code
var helloApp = angular.module("helloApp", []);
helloApp.controller("HttpController", [ '$scope', '$http',
function($scope, $http) {
$http({
method : 'GET',
url : '/user/25'
}).success(function(data, status, headers, config) {
$scope.profiles = data;
}).error(function(data, status, headers, config) {
alert( "failure");
});
} ])
SpringMVC Controller Code
@RequestMapping(value = "/user/{id}", method = RequestMethod.GET)
public @ResponseBody String getUserProfileById( @PathVariable("id") long userId ) {
//
// Code processing the input parameters
//
String response = "[{\"id\":\""+ userId + "\",\"firstname\":\"Aiyana\",\"lastname\":\"Shukla\",\"address\":\"Hyderabad, India\",\"age\":\"8\",\"email\":\"aiyana123@gmail.com\"}]";
return response;
}
One could use $resource service which is an abstraction over $http service and uses this service underneath. I prefer this approach as it helps me to achieve the same objective with neat code based on object-based abstraction.
Following code samples represents how to consume RESTful APIs using GET or QUERY method. You may want to pay attention to usage of @PathVariable on Spring MVC side to retrieve the data coming with RESTful request.
Consuming RESTful APIs with GET Method
The code samples below would represent how to consume RESTful APIs by invoking “GET” action method on a $resource object.
AngularJS View Code
Following code represents the view code to display the response that arrived with RESTful API call. Pay attention to the fact that JSON response is assigned to $scope.profile in the callback function. The code below represents the usage of profile JSON object to display the view.
<table class="table">
<tr>
<th>Id
</th>
<th>Name
</th>
<th>Address
</th>
<th>Age
</th>
</tr>
<tr>
<td>{{profile.id}}
</td>
<td>{{profile.firstname + " " + profile.lastname}}
</td>
<td>{{profile.address}}
</td>
<td>{{profile.age}}
</td>
</tr>
</table>
AngularJS Controller Code
Pay attention to some of the following in the code below:
var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource',
function($scope, $resource) {
//
// GET Action Method
//
var User = $resource('/user/:userId', {userId:'@userId'});
User.get( {userId:25}, function(user){
$scope.profile = user;
})
} ]);
Spring MVC Controller Code
Pay attention to usage of @PathVariable for processing the template based URL.
@RequestMapping(value = "/user/{id}", method = RequestMethod.GET)
public @ResponseBody String getUserProfileById( @PathVariable("id") long userId ) {
//
// Code processing the input parameters
//
String response = "{\"id\":\""+ userId + "\",\"firstname\":\"Aiyana\",\"lastname\":\"Shukla\",\"address\":\"Hyderabad, India\",\"age\":\"8\",\"email\":\"aiyana123@gmail.com\"}";
return response;
}
<table class="table">
<tr>
<th>Id
</th>
<th>Name
</th>
<th>Address
</th>
<th>Age
</th>
</tr>
<tr ng-repeat="profile in profiles">
<td>{{profile.id}}
</td>
<td>{{profile.firstname + " " + profile.lastname}}
</td>
<td>{{profile.address}}
</td>
<td>{{profile.age}}
</td>
</tr>
</table>
AngularJS Controller Code
Pay attention to some of the following:
var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource',
function($scope, $resource) {
//
// Query Action Method
//
var UserProfiles = $resource('/getAllProfiles');
UserProfiles.query(function(profiles){
$scope.profiles = profiles;
});
} ]);
Spring MVC Controller Code
Pay attention to the fact that an array of JSON object is returned.
@RequestMapping(value = "/getAllProfiles", method = RequestMethod.GET)
public @ResponseBody String getAllProfiles( ModelMap model ) {
String jsonData = "[{\"firstname\":\"ajitesh\",\"lastname\":\"kumar\",\"address\":\"211/20-B,mgstreet\",\"city\":\"hyderabad\",\"phone\":\"999-888-6666\"},{\"firstname\":\"nidhi\",\"lastname\":\"rai\",\"address\":\"201,mgstreet\",\"city\":\"hyderabad\",\"phone\":\"999-876-5432\"}]";
return jsonData;
}
…
Large language models (LLMs) have fundamentally transformed our digital landscape, powering everything from chatbots and…
As Large Language Models (LLMs) evolve into autonomous agents, understanding agentic workflow design patterns has…
In today's data-driven business landscape, organizations are constantly seeking ways to harness the power of…
In this blog, you would get to know the essential mathematical topics you need to…
This blog represents a list of questions you can ask when thinking like a product…
AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…
View Comments
/getAllProfiles is a very SOAP way of creating a REST API. Ideally you just have GET /profiles and to get a specific profile you'd use /profiles/:id.