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.

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

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:

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

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

Saving a student is also as easy as getting it

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.

If you enjoyed the article, please share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditEmail this to someone

8 Comments Implementing REST services in AngularJS using Restangular

      1. dapo

        how do u query 2 table in restangular example student dataset and teacher dataset with age 20 from the mongo database
        query both together get display result

        Reply
        1. Arian Celina

          Restangular is not about tables, nor about the database. It is about doing restful communication with your backend.

          You should solve this problem in your backend providing services and service actions/methods that do this query and provide a result to a request.

          Reply
          1. Leonardo

            if you are familiar with node, maybe is a good aprouch.
            I use node + mongoose plugin, it’s nice!
            Have a nice day

Leave A Comment

Your email address will not be published. Required fields are marked *