From 6244b817d8b2a50c10a3aaf3041d31059149ef02 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Sun, 16 Jul 2017 10:37:52 +0200 Subject: [PATCH] Use ngx-restangular to handle account API. --- package.json | 1 + src/accounts/account.module.ts | 4 ++- src/accounts/account.service.ts | 47 +++++++++++---------------------- src/app.config.ts | 2 ++ src/app.module.ts | 17 +++++++++++- src/app.ts | 4 +-- 6 files changed, 40 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 464c977..6b1ba70 100644 --- a/package.json +++ b/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" diff --git a/src/accounts/account.module.ts b/src/accounts/account.module.ts index ecb75d9..446286f 100644 --- a/src/accounts/account.module.ts +++ b/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 diff --git a/src/accounts/account.service.ts b/src/accounts/account.service.ts index 02cd80a..673402e 100644 --- a/src/accounts/account.service.ts +++ b/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 { - this.logger.log("Query accounts"); - return this.http.get(this.url) - .catch((res: Response) => Observable.throw(res.json())) - .map((res: Response) => res.json()); + return this.all().getList(); } get(id: number): Observable { - return this.http.get(this.url + id) - .catch((res: Response) => Observable.throw(res.json())) - .map((res: Response) => res.json()); + return this.one(id).get(); } create(account: Account): Observable { - let headers = new Headers({ 'Content-Type': 'application/json' }); - 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()); + return this.all().post(account); } update(account: Account): Observable { - let headers = new Headers({ 'Content-Type': 'application/json' }); - 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()); + return this.one(account.id).post(null, account); } delete(account: Account): Observable { - let headers = new Headers({ 'Content-Type': 'application/json' }); - 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()); + return this.one(account.id).delete(); } } diff --git a/src/app.config.ts b/src/app.config.ts index 9ca2867..951b91c 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -24,3 +24,5 @@ export default function AppConfig($routeProvider) { redirectTo: '/accounts' }); }; + +export const ApiBaseURL = "http://localhost:8080/api"; diff --git a/src/app.module.ts b/src/app.module.ts index fa07809..60dd482 100644 --- a/src/app.module.ts +++ b/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; + } + ); + }) ] }) diff --git a/src/app.ts b/src/app.ts index 241ff89..9902c3b 100644 --- a/src/app.ts +++ b/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);