NgxCrudState

Thư viên được tạo với Angular CLI phiên bản 10.1.3.

Hiện nay single page application đã trở nên phổ biến và phát triển cực kì mạnh mẽ, thư viện ngx-crud-state giúp người dùng lưu trữ tất cả các trạng thái vào store. Và chỉ call api lấy data khi trên store chưa có data và ngược lại nếu store có data thì chỉ trả về dữ liệu.

Mục lục

1. Giới thiệu
2. Cài đặt
3. Bắt đầu

Giới thiệu

Web demo: NgxCrudState Xem trực tiếp code trên StackBlitz.

Cài đặt

Cài đặt ngx-crud-state với npm

NPM

npm install --save ngx-crud-state

Bắt đầu

Khởi tạo một file metadata.ts

import { Metadata, HttpRequestMethod } from "ngx-crud-state";

export const metadata: Metadata = {
  // https://5f4b8248ea007b0016b1d88b.mockapi.io/api/v1/users
  // RESTful API
  user: {
    entityName: "user"
  },

  // Non RESTful API
  movie: {
    entityName: "movie",
    // If the primary key is id, there is no need to declare it
    primaryKey: "maPhim",
    getItems: {
      url: `https://movie0706.cybersoft.edu.vn/api/QuanLyPhim/LayDanhSachPhim?maNhom=GP01`,
      method: HttpRequestMethod.GET
    },
    create: {},
    update: {},
    delete: {}
  },

  // No crud
  userLogin: {
    entityName: "userLogin",
    loadState: {
      url: `https://movie0706.cybersoft.edu.vn/api/QuanLyNguoiDung/DangNhap`,
      method: HttpRequestMethod.POST
    }
  }
};

Import NgxCrudStateModule vào trong root application module :

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CoreModule } from "./core/core.module";
import { NgxCrudStateModule } from "ngx-crud-state";
import { metadata } from './metadata

@NgModule({
  //...
  imports: [
    //...
    NgxCrudStateModule.forRoot({
        metadata: metadata,
        rootApiUrl: 'https://5f4b8248ea007b0016b1d88b.mockapi.io/api/v1'
    })
  ]
  //...
})
export class AppModule {}