Click here to Skip to main content
13,766,627 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

26.9K views
9 bookmarked
Posted 16 Apr 2015
Licenced CPOL

Implementing REST Services in AngularJS using Restangular

, 16 Apr 2015
Rate this:
Please Sign up or sign in to vote.
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.

License

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

Share

About the Author

Arian Celina
Architect
Albania Albania
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
Questionwhy is the article tagged with C++ Pin
chandanadhikari16-Apr-15 21:02
memberchandanadhikari16-Apr-15 21:02 
AnswerRe: why is the article tagged with C++ Pin
Arian Celina17-Apr-15 1:09
memberArian Celina17-Apr-15 1:09 
GeneralRe: why is the article tagged with C++ Pin
Member 1150982814-Nov-15 12:00
memberMember 1150982814-Nov-15 12: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06-2016 | 2.8.181114.1 | Last Updated 16 Apr 2015
Article Copyright 2015 by Arian Celina
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid