Restangular

Restangular is an AngularJS service that simplifies common GET, POST, DELETE, and UPDATE requests with a minimum of client code. It's a perfect fit for any WebApp that consumes data from a RESTful API.

Try the live demo on plunkr. It uses the same example as the official Angular Javascript Project, but with Restangular!

Watch a video introduction of a talk I gave at Devoxx France about Restangular.

Table of contents

• Restangular
• Differences with $resource
• How do I add this to my project?
• Dependencies
• Production apps using Restangular
• Starter Guide
• Quick configuration for Lazy Readers
• Adding dependency to Restangular module in your app
• Using Restangular
  • Creating Main Restangular object
  • Let's code!
• Configuring Restangular
  • Properties
  • setBaseUrl
  • setExtraFields
  • setParentless
  • setDefaultHttpFields
  • addElementTransformer
  • setOnElemRestangularized
  • setResponseInterceptor
  • setResponseExtractor (alias of setResponseInterceptor)
  • addResponseInterceptor
  • setRequestInterceptor
  • addRequestInterceptor
  • setFullRequestInterceptor
  • addFullRequestInterceptor
  • setErrorInterceptor
  • setRestangularFields
  • setMethodOverriders
  • setDefaultRequestParams
  • setFullResponse
  • setDefaultHeaders
  • setRequestSuffix
  • setUseCannonicalId
  • setPlainByDefault
  • How to configure them globally
  • Configuring in the config
  • Configuring in the run
  • How to create a Restangular service with a different configuration from the global one
  • Decoupled Restangular Service
• Methods description
  • Restangular methods
  • Element methods
  • Collection methods
  • Custom methods
• Copying elements
• Enhanced promises - Using values directly in templates
• Using Self reference resources
• URL Building
• Creating new Restangular Methods
• Adding Custom Methods to Collections
  • Example:
• Adding Custom Methods to Models
  • Example:
• FAQ
  • How can I handle errors?
  • I need to send one header in EVERY Restangular request, how do I do this?
  • Can I cache requests?
  • Can it be used in $routeProvider.resolve?
  • My response is actually wrapped with some metadata. How do I get the data in that case?
  • I use Mongo and the ID of the elements is _id not id as the default. Therefore requests are sent to undefined routes
  • What if each of my models has a different ID name like CustomerID for Customer
  • How do I handle CRUD operations in a List returned by Restangular?
  • When I set baseUrl with a port, it's stripped out.
  • How can I access the unrestangularized element as well as the restangularized one?
  • Restangular fails with status code 0
  • Why does this depend on Lodash / Underscore?
  • How do I cancel a request?
• Supported Angular versions
• Server Frameworks
• Releases Notes
• License

Back to top

Differences with $resource

Restangular has several features that distinguish it from $resource:

• It uses promises. Instead of doing the "magic" filling of objects like $resource, it uses promises.
• You can use this in $routeProvider.resolve. As Restangular returns promises, you can return any of the methods in the $routeProvider.resolve and you'll get the real object injected into your controller if you want.
• It doesn't have all those $resource bugs. Restangular doesn't have problem with trailing slashes, additional : in the URL, escaping information, expecting only arrays for getting lists, etc.
• It supports all HTTP methods.
• It supports ETag out of the box. You don't have to do anything. ETags and If-None-Match will be used in all of your requests
• It supports self linking elements. If you receive from the server some item that has a link to itself, you can use that to query the server instead of writing the URL manually.
• You don't have to create one $resource object per request. Each time you want to do a request, you can just do it using the object that was returned by Restangular. You don't need to create a new object for this.
• You don't have to write or remember ANY URL. With $resource, you need to write the URL Template. In here, you don't write any urls. You just write the name of the resource you want to fetch and that's it.
• It supports nested RESTful resources. If you have Nested RESTful resources, Restangular can handle them for you. You don't have to know the URL, the path, or anything to do all of the HTTP operations you want.
• Restangular lets you create your own methods. You can create your own methods to run the operation that you want. The sky is the limit.
• Support for wrapped responses. If your response for a list of element actually returns an object with some property inside which has the list, it's very hard to use $resource. Restangular knows that and it makes it easy on you. Check out https://github.com/mgonto/restangular#my-response-is-actually-wrapped-with-some-metadata-how-do-i-get-the-data-in-that-case
• You can build your own URLs with Restangular objects easily. Restangular lets you create a Restangular object for any url you want with a really nice builder.

Let's see a quick and short example of these features

// Restangular returns promises
Restangular.all('users').getList()  // GET: /users
.then(function(users) {
  // returns a list of users
  $scope.user = users[0]; // first Restangular obj in list: { id: 123 }
})

// Later in the code...

// Restangular objects are self-aware and know how to make their own RESTful requests
$scope.user.getList('cars');  // GET: /users/123/cars

// You can also use your own custom methods on Restangular objects
$scope.user.sendMessage();  // POST: /users/123/sendMessage

// Chain methods together to easily build complex requests
$scope.user.one('messages', 123).one('from', 123).getList('unread');
// GET: /users/123/messages/123/from/123/unread

Back to top

How do I add this to my project?

You can download this by:

• Using bower and running bower install restangular
• Using npm and running npm install restangular
• Downloading it manually by clicking here to download development unminified version or here to download minified production version
• Using CdnJS CDN files:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>

Back to top

Dependencies

Restangular depends on Angular and Lodash (or Underscore).

Back to top

Production apps using Restangular

Each time, there're more Production WebApps using Restangular. If your webapp uses it and it's not in the list, please create an issue or submit a PR:

• Life360 is using Restangular to build the WebApp version of their platform
• Thomson Reuters is using Restangular for the new Webapp they've built
• Quran.com is using Restangular for their alpha/beta app and soon to be main site
• ENTSO-E Transparency Platform

Back to top

Starter Guide

Quick Configuration (For Lazy Readers)

This is all you need to start using all the basic Restangular features.

// Add Restangular as a dependency to your app
angular.module('your-app', ['restangular']);

// Inject Restangular into your controller
angular.module('your-app').controller('MainCtrl', function($scope, Restangular) {
  // ...
});

The Restangular service may be injected into any Controller or Directive :) Note: When adding Restangular as a dependency it is not capitalized 'restangular' But when injected into your controller it is 'Restangular'

Back to top

Using Restangular

Creating Main Restangular object

There are 3 ways of creating a main Restangular object. The first one and most common one is by stating the main route of all requests. The second one is by stating the main route and object of all requests.

// Only stating main route
Restangular.all('accounts')

// Stating main object
Restangular.one('accounts', 1234)

// Gets a list of all of those accounts
Restangular.several('accounts', 1234, 123, 12345);

Back to top

Let's code!

Now that we have our main Object let's start playing with it.

````javascript // First way of creating a Restangular object. Just saying the base URL var baseAccounts = Restangular.all('accounts');

// This will query /accounts and return a promise. baseAccounts.getList().then(function(accounts) { $scope.allAccounts = accounts; });

// Does a GET to /accounts // Returns an empty array by default. Once a value is returned from the server // that array is filled with those values. So you can use this in your template $scope.accounts = Restangular.all('accounts').getList().$object;

var newAccount = {name: "Gonto's account"};

// POST /accounts baseAccounts.post(newAccount);

// GET to http://www.google.com/ You set the URL in this case Restangular.allUrl('googlers', 'http://www.google.com/').getList();

// GET to http://www.google.com/1 You set the URL in this case Restangular.oneUrl('googlers', 'http://www.google.com/1').get();

// You can do RequestLess "connections" if you need as well

// Just ONE GET to /accounts/123/buildings/456 Restangular.one('accounts', 123).one('buildings', 456).get()

// Just ONE GET to /accounts/123/buildings Restangular.one('accounts', 123).getList('buildings')

// Here we use Promises then // GET /accounts baseAccounts.getList().then(function (accounts) { // Here we can continue fetching the tr