0.0.16 • Published 4 years ago
ngx-crud-state v0.0.16
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
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 {}