ng2-api

Angular2 API services that wrap Http. See full client and server example ng2-api-examples

Install

npm i --save ng2-api

Usage

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
export function authenticated(): boolean {
return !!localStorage.getItem('token');
}
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate() {
if (authenticated()) { return true; }
// Navigate to the login page
this.router.navigate(['/login']);
return false;
}
}

auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { ApiHttp } from 'ng2-api';
import { authenticated } from './auth.guard';
@Injectable()
export class AuthService {
user: Object;
authenticated: boolean = authenticated();
constructor(protected http: ApiHttp,
protected router: Router) {
try {
this.user = JSON.parse(localStorage.getItem('profile'));
} catch(e) {
this.user = {};
}
}
login(params: any) {
return this.http.post('login', JSON.stringify(params))
.subscribe((res: Response) => {
let {token, user} = res.json();
let {token, user} = {token: 'abc', user: params};
localStorage.setItem('profile', JSON.stringify(user));
this.http.config.token = token;
this.authenticated = true;
this.user = user;
this.router.navigate(['/admin/posts']);
});
}
logout() {
localStorage.removeItem('profile');
this.http.config.token = '';
this.authenticated = false;
this.user = null;
this.router.navigate(['/login']);
}
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { ApiConfig, ApiHttp } from './ng2-api';
import { AppComponent } from './app.component';
import { AuthService } from './shared/auth.service';
import { PostsComponent } from './posts/posts.component';
import { PostsService } from './posts/posts.service';
import { routing } from './app.routing';
@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
routing
],
declarations: [
AppComponent,
PostsComponent,
],
providers: [
{
provide: ApiHttp,
useFactory: (http: Http) => new ApiHttp(new ApiConfig({baseUrl: '/api'}), http),
deps: [Http]
},
AuthService,
PostsService,
],
bootstrap: [AppComponent]
})
export class AppModule {}

posts.service.ts

import { Injectable } from '@angular/core';
import { ApiService } from 'ng2-api';
export interface Post {
id?: number;
title: string;
body: string;
}
@Injectable()
export class PostsService extends ApiService<Post> {
constructor(protected http: ApiHttp) {
super(http, 'posts');
}
}

ApiService methods

find(id: number | string): Observable<Post>
findAll(search?: any): Observable<Post[]>
create(model: Post): Observable<Post>
update(model: Post): Observable<Post>
delete(model: Post): Observable<boolean>

ApiService customization

You can customize resource path and provide optional config to super().

If need, you can also overwrite ApiService public (i.e. update) and private methods (i.e. serialize, deserialize)

Example:

@Injectable()
export class PostsService extends ApiService<Post> {
constructor(protected http: ApiHttp) {
super(http, 'posts', { arrayRoot: 'posts',
objectRoot: 'post'
});
}
}

Tests

npm i
npm test

License

MIT