Click here to Skip to main content
15,861,172 members
Articles / AngularJs

Implementing REST Services in AngularJS using Restangular

Rate me:
Please Sign up or sign in to vote.
4.20/5 (4 votes)
16 Apr 2015CPOL2 min read 33.4K   9   3
Implementing REST services in AngularJS using Restangular

Current web development trends are in favour of AngularJS. The framework is having its momentum and is one of the most popular choices for client side development frameworks. Personally, I like it a lot, it makes my job easier to jump start the web development projects quickly. It is also useful for hybrid mobile applications.

Another thing that has quite a momentum for some time now is implementation and consumption of REST services. REST as an architecture, although it makes things easier after implementation, is an architectural style which is very easy to get it wrong, despite most of the time what we need is simple GET/POST/PUT/DELETE requests.

Restangular is an AngularJS service which makes GET/POST/PUT/DELETE requests simpler and easier. The configuration is easier and can be done in several ways with different initiation settings. Let me try to put an easier demonstration on how to use Restangular on your site and how easy it is to make your AngularJS app consume RESTful service.

Configuration

The first thing to do is to reference restangular in your index.html (refer to official page for installation).

To configure restangular with your AngularJS app, in your app module definition file you configure restangular settings.

JavaScript
(function() {
	angular.module("myApp", ["restangular"]).config(function(RestangularProvider) {
                //set the base url for api calls on our RESTful services
		var newBaseUrl = "";
		if (window.location.hostname == "localhost") {
			newBaseUrl = "http://localhost:8080/api/rest/register";
		} else {
			var deployedAt = window.location.href.substring(0, window.location.href);
			newBaseUrl = deployedAt + "/api/rest/register";
		}
		RestangularProvider.setBaseUrl(newBaseUrl);
	});
}());

Now that we have restangular configured, we can make requests for resource like this:

JavaScript
//get all students
Restangular.all('students');

//get student with id 1234
Restangular.one('students', 1234);

Alternatively, we can also create services for our resources. For e.g., if I have a resource named students, I would create the service through these lines of code:

JavaScript
(function() {
	angular.module("myApp").factory("Students",
		["Restangular", function(Restangular) {
			var service = Restangular.service("students");  
                        // I can add custom methods to my Students service
                        // by adding functions here service
                        service.validateData = function(student) {
                           //validate student data
                        }
			return service;
		}]);
}());

then I would add this service as a dependency to the controller that I want to use it in. With this simple service definition, I can now easily initiate GET/POST/PUT/DELETE requests through restangular.

Let us take some examples. We can read all students by requesting

JavaScript
Students.getList().then(function(data){
  //do something with the list of students
});

or if I want to read the student with id 1234, I would request

JavaScript
Students.one(1234).get().then(function(data){
  //do something with student data
});

Saving a student is also as easy as getting it.

JavaScript
//we expect student data to be filled by angularjs databinding

Students.post(student).then(function(data) {
   //interprete save result
});

Restangular has the main request types GET/POST/PUT/DELETE almost ready made for us, but also it allows many things to be configured per our needs. We can make custom requests to custom methods, specify parameter names, and many other not so standard things. Please refer to restangular’s github page for detailed specifications.

As it makes RESTful API consumption so simple, currently it is one of my favorite parts of my AngularJS apps.

The post Implementing REST services in AngularJS using Restangular appeared first on arian-celina.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Albania Albania
I am a Software Architect, a web developer, and a Computer Science lecturer. I enjoy solving business problems by providing software solutions to them. My favorite technologies and fields of interest include ASP.NET, C# programming language, Java programming language, Javascript, jQuery, AngularJS, Web Services, REST, and mobile application development

Comments and Discussions

 
Questionwhy is the article tagged with C++ Pin
chandanadhikari16-Apr-15 20:02
chandanadhikari16-Apr-15 20:02 
AnswerRe: why is the article tagged with C++ Pin
Arian Celina17-Apr-15 0:09
Arian Celina17-Apr-15 0:09 
unfortunately it was automatically assigned to c++ from my blog feed. I will change it.

thank you

GeneralRe: why is the article tagged with C++ Pin
Member 1150982814-Nov-15 11:00
Member 1150982814-Nov-15 11:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.