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.

(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:

//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:

(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

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

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

Saving a student is also as easy as getting it.

//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.