How to handle REST API calls with Angular 2 and ng2-restangular

Restangular and Angular 2

Every Angular 2 developer who came from AngularJS is missing some favourite open source projects which were available for 1.xx version. One of them is amazing Martin Gontovnikas restangular which suggests a high-level approach to consuming REST data compared to built-in $resource.

Last update: April 20, 2017

ng2-restangular was renamed to ngx-restangular due to Angular Semantic Versioning (SemVer) changing. More can be found here.

Official ngx-restangular documentation was released. Great opportunity to use Angular Universal. Refer to ngx-restangular official site.

Also there’re no built-in alternatives such as $resource in Angular 2 except of Http module. This gives enough freedom to those guys who love to do everything from scratch and build their own solution for this.

To write your own models, interceptors, modules for handling errors, methods for writing needed headers and a lot of things — that’s really exciting, but… It’s not so fun, when you’re building it a third time in 2 months, right? That’s the reason why we decided to port Restangular on Angular 2/TypeScript. Click here to check it out on Github.

This project required a lot of modifications because there are so many significant features in which Angular 2 differs from its predecessor, e.g. an ability to use Observables instead of Promises.

To make it short, the main idea of this project is to give Angular 2 community a powerful but yet simple tool with all Restangular features, such as:

  • Building chain from methods one, all, several
  • Support of self-linking elements
  • Support of nested RESTful resources
  • Creating your own methods

How to add ng2-restangular to your awesome project:

  1. Go to your project directory and install it with npm: 
    npm install ng2-restangular
  2. Import RestangularModule to your application root module.

Let’s config it quickly and start using it

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

import { NgModule } from '@angular/core';  
import { AppComponent } from './app.component';
import { RestangularModule } from 'ng2-restangular';

// AppModule is the main entry point into Angular2 bootstraping process
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
],
imports: [
// Importing RestangularModule and making default configs for restanglar
RestangularModule.forRoot((RestangularProvider) => {
RestangularProvider.setBaseUrl('http://api.test.local/v1');
RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
}
),
]
})
export class AppModule {
}
// later in code ...
@Component({
...
})
export class OtherComponent {
constructor(private restangular: Restangular) {
}
  ngOnInit() {
// GET http://api.test.local/v1/users/2/accounts
this.restangular.one('users', 2).all('accounts').getList();
}
}

Click here to check it out on Github.

Why and where you should use ng2-restangular

This project can be an overkill if you’re trying to implement POC or something simple, but when we’re talking about complex web app with multiple requests to REST API, you should use it without hesitation.

You can read article here: http://blog.2muchcoffee.com/how-to-handle-rest-api-calls-with-angular-2-and-ng2-restangular/