angular2-active-record

angular2-active-record is a helper library for connect api in your Angular 2 applications.

Installation

npm install angular2-active-record

Usage

config

The first config system app same as:

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },
  baseURL: '/',
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: {
      "angular2-active-record": "node_modules/angular2-active-record/angular2-active-record.js"
  },
});

Config main app:

import {ApiConfig} from 'angular2-active-record';

...

class App {

}

bootstrap(App, [
  HTTP_PROVIDERS,
  provide(ApiConfig, {
    useValue: new ApiConfig({
      urlAPI: "http://localhost:3456/api/"
    })
  }),
  
])

A default configuration for urlAPI, header, methods details is provided:

• urlAPI: http://localhost:3456/api/
• headers: {'Content-Type': 'application/json'}
• methods: {query: "get",update: "put", insert:"post",delete: "delete"}

If you wish to configure the urlPI, headers, methods, you can pass a config object when ApiConfig is injected.

...

bootstrap(App, [
  HTTP_PROVIDERS,
  provide(ApiConfig, {
    useValue: new ApiConfig({
      urlAPI: "http://localhost:3456/api/",
      headers: {},
      methods: {
        query: "get",
        update: "put",
        insert: "post",
        delete: "delete"
      }
    })
  }),
])

Write services to connect api

Example: a service to connect api for posts, and have apis as follow:

[GET]http://localhost:3456/api/posts # get all post
[GET]http://localhost:3456/api/posts/1 # show detail a post
[POST]http://localhost:3456/api/posts # create a post
[PUT]http://localhost:3456/api/posts/1 # update for post that post id = 1
[DELETE]http://localhost:3456/api/posts/1 # delete a post that post id = 1

import {Injectable}         from 'angular2/core';
import {Response}           from 'angular2/http';
import {Http, Headers, RequestOptions}from 'angular2/http';
import {Observable}         from 'rxjs/Observable';

import {ActiveRecord, ApiConfig} from 'angular2-active-record';

export interface Post {
  title: string;
  content: string;
  created_at?: Date;
  status?: boolean;
}


@Injectable()
export class PostService extends ActiveRecord<Post> {
  constructor(public options: ApiConfig, public http: Http) { 
    super(options, http, "posts");
  }
}

use PostService in post component:

import {Component, OnInit} from 'angular2/core';

import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
import {AuthHttp, AuthConfig, tokenNotExpired, JwtHelper} from "angular2-jwt";
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {Post} from '../models/post.model';
import {PostService} from '../services/post.service';

@Component({
  selector: 'posts',
  templateUrl: '/app/components/posts.component.html',
  directives: [MATERIAL_DIRECTIVES],
  providers: [PostService]
})

export class PostsComponent implements OnInit {
  constructor(private _postService: PostService, private _parentRouter: Router) {
  }
  errorMessage: string;
  posts: Post[];

  ngOnInit() { this.getPosts(); }

  getPosts() {
    this._postService.findAll()
      .subscribe(
        posts => this.posts = posts,
        error => this.errorMessage = error
      );
  }
  updatePost(id, post: Post) {
    this._postService.update(id, {post: post}).subscribe (
        res => {}
      );
  }
  createPost(post: Post) {
    this._postService.insert( {post: post}).subscribe (
        res => {}
      );
  }
  showPost(id) {
    this._postService.find(id).subscribe(
        res => {}
     );
  }
  deletePost(id) {
    this._postService.delete(id).subscribe(
        res => {}
      );
  }
}

If you want to use angular2-jwt to authenticate after login, post.service same as:

@Injectable()
export class PostService extends ActiveRecord<Post> {
  constructor(public options: ApiConfig, public http: AuthHttp) { 
    super(options, http, "posts");
  }
}

If you want to customize response data or handle error response, you must override processData and handleError in `post.service

  protected processData(res: Response) {
    return <T>res.json();
  }

  protected handleError(error: Response): ErrorObservable {
    return Observable.throw(new Error(error.json().join() || 'Server error'));
  }

Furthermore, you can override generateParam function to define query params of api:

protected generateParam(params: any = {}): string {
    let params_arr: Array<string> = [];
    for (let key in params) {
      if (params[key]) {
        params_arr.push(key + "=" + params[key]);
      }
    }
    return "?" + params_arr.join("&");
  }

License

This project is licensed under the MIT license. See the LICENSE file for more info.