*nix Programming Mammals

    ng2-api
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    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

    Install

    npm i ng2-api

    DownloadsWeekly Downloads

    5

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • tomaszbak