Use ngx-restangular to handle account API.

package.json

@@ -62,6 +62,7 @@
     "jquery": "^3.2",
     "meanie-angular-storage": "^1.3.1",
     "moment": "^2.18",
+    "ngx-restangular": "^1.0.11",
     "reflect-metadata": "^0.1.10",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.12"

src/accounts/account.module.ts

@@ -4,13 +4,15 @@ import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
+import { RestangularModule } from 'ngx-restangular';
 
 import { AccountService } from './account.service';
 
 @NgModule({
   imports: [
     HttpModule,
-    NgLoggerModule.forRoot(Level.LOG)
+    NgLoggerModule.forRoot(Level.LOG),
+    RestangularModule
   ],
   providers: [
     AccountService

src/accounts/account.service.ts

@@ -3,10 +3,9 @@ import { Injectable } from '@angular/core';
 import { Http, Headers, RequestOptions, Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
 
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
 
 import { Logger } from "@nsalaun/ng-logger";
+import { Restangular } from "ngx-restangular";
 
 import { Account } from './account';
 
@@ -14,49 +13,35 @@ import { Account } from './account';
 export class AccountService {
   private url = '/api/account/';
 
-  static $inject = ['Logger']
+  constructor(
+    private logger: Logger,
+    private restangular: Restangular) {}
 
-  constructor(private logger: Logger, private http: Http) { }
+  private all() {
+    return this.restangular.all('account');
+  }
+
+  private one(id: number) {
+    return this.restangular.one('account', id);
+  }
 
   query(): Observable<Account[]> {
-    this.logger.log("Query accounts");
+    return this.all().getList();
-    return this.http.get(this.url)
-      .catch((res: Response) => Observable.throw(res.json()))
-      .map((res: Response) => res.json());
   }
   
   get(id: number): Observable<Account> {
-    return this.http.get(this.url + id)
+    return this.one(id).get();
-      .catch((res: Response) => Observable.throw(res.json()))
-      .map((res: Response) => res.json());
   }
 
   create(account: Account): Observable<Account> {
-    let headers = new Headers({ 'Content-Type': 'application/json' });
+    return this.all().post(account);
-    let options = new RequestOptions({ headers: headers });
-    let body = JSON.stringify(account);
-
-    return this.http.post(this.url, body, options)
-      .catch((res: Response) => Observable.throw(res.json()))
-      .map((res: Response) => res.json());
   }
 
   update(account: Account): Observable<Account> {
-    let headers = new Headers({ 'Content-Type': 'application/json' });
+    return this.one(account.id).post(null, account);
-    let options = new RequestOptions({ headers: headers });
-    let body = JSON.stringify(account);
-
-    return this.http.post(this.url + account.id, body, options)
-      .catch((res: Response) => Observable.throw(res.json()))
-      .map((res: Response) => res.json());
   }
 
   delete(account: Account): Observable<Account> {
-    let headers = new Headers({ 'Content-Type': 'application/json' });
+    return this.one(account.id).delete();
-    let options = new RequestOptions({ headers: headers });
-
-    return this.http.delete(this.url + account.id)
-      .catch((res: Response) => Observable.throw(res.json()))
-      .map((res: Response) => res.json());
   }
 }

src/app.config.ts

@@ -24,3 +24,5 @@ export default function AppConfig($routeProvider) {
             redirectTo: '/accounts'
         });
 };
+
+export const ApiBaseURL = "http://localhost:8080/api";

src/app.module.ts

@@ -9,13 +9,28 @@ import { BrowserModule } from '@angular/platform-browser';
 import { UpgradeModule } from '@angular/upgrade/static';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+import { RestangularModule } from 'ngx-restangular';
+
 import { AccountModule } from './accounts/account.module';
+import { ApiBaseURL } from './app.config';
 
 @NgModule({
   imports: [
     BrowserModule,
     UpgradeModule,
-    AccountModule
+    AccountModule,
+    RestangularModule.forRoot((RestangularProvider) => {
+      RestangularProvider.setBaseUrl(ApiBaseURL);
+
+      // Inject JSON in error instead the full response object.
+      RestangularProvider.setErrorInterceptor(
+        function(response, subject, responseHandler) {
+          // TODO Alexis Lahouze 2017-07-16 Handle 401 error.
+          subject.error(response.json());
+          return false;
+        }
+      );
+    })
   ]
 })
 

src/app.ts

@@ -27,7 +27,7 @@ import loginModule from '@accountant/login';
 import operationModule from '@accountant/operations';
 import schedulerModule from '@accountant/scheduler';
 
-var routing = require('./app.config.ts');
+import AppConfig from './app.config.ts';
 
 require('bootstrap-webpack!./bootstrap.config.ts');
 
@@ -37,4 +37,4 @@ angular.module('accountant', [
     loginModule,
     operationModule,
     schedulerModule,
-]).config(routing);
+]).config(AppConfig);