README
CrudService
A simple crud service for simple Angular applications.
Installation
npm install @jorns/ng-crud-service
Usage
AppModule
. .forRoot
Takes an object with an apiUrl property.
Set the desired url for the API you consume and it will be prefixed on al your requests.
imports: [
.......,
CrudServiceModule.forRoot({
apiUrl: 'https://example.com/api',
})
]
Creating a service
Using a schematic:
ng generate @jorns/ng-crud-service:crud-service --name YourServiceName --path your/service/path
Custom:
Create a service and extend CrudService
. Provide a resource prefix for your service which will be
prepended to all your requests made.
Inject the HttpClient
to the contructor and provide to the baseclass constructor with super(http)
.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { CrudService } from '@jorns/crud-service';
@Injectable({
providedIn: 'root'
})
export class YourService extends CrudService {
public resourcePrefix = 'todo';
constructor(public http: HttpClient) {
super(http);
}
}
Using the service
Now you can import and use your service inside your components. Add the generic Type
you expect
to return from your API. Al CRUD methods return an Observable<T>
of the given generic Type.
import { YourService } from 'your.service.ts';
this.myservice.create<Todo>().subscribe();
this.myservice.read<Todo[]>().subscribe();
this.myservice.update<Todo>().subscribe();
this.myservice.delete<Todo>().subscribe();
If the API's response has a different response i.e. { result: { todo }, message: 'Success' status: 200 } or an nested array with your results { result: [ { todo }, { todo }, { todo }, ], message: 'Success' status: 200 }
You can pass in your own Request class or interface if you need more then return a single class/interface or Array. For instance:
interface Request<T> {
result: T;
status: number;
message: string;
errors?: null|[];
};
`this.myservice.read<Request<Todo[]>>().subscribe();`
Adding route parameters
All CRUD methods take a Param
type. This can be of type string|number|array
. When you have
a singel parameter you can pass in a string
or number
. When dealing with multipe url parameters you can add the in
the right order into an array
;
create<T>(formData?: FormDat a,param?: Param): Observable<T>
read<T>(param?: Param): Observable<T>
update<T>(param: Param, formData?: FormData): Observable<T>
delete<T>(param: Param): Observable<T>
this.myservice.update<Todo>([10,'edit'],formData).subscribe();
// Creates the url todo/10/edit
this.myservice.create<Todo>(formData,['category','5']).subscribe();
// Creates the url todo/category/5
this.myservice.delete<Todo>(10).subscribe();
// Creates the url todo/10
Extending the service
Of course you can add your own methods to the service you created when basic CRUD is not enough
export class YourService extends CrudService { public resourcePrefix = 'todo';
constructor(public http: HttpClient) {
super(http);
}
// for example return all todo's which belong to a category of 10.
customMethod(id: number): Observable<IRequest<Todo[]>> {
return this.http.get<IRequest<Todo[]>>(`/${this.resourcePrefix}/categories/10`);
}
}
Using createUrlTree(params: Param)
/**
* for example return all todo's which belong to a category of 10, the params value
* givin in this case is an Array
. ['category','5']
.
* This method will build up the url including the resourcePrefix
.
*/
otherCustomMethod(params: Param): Observable<IRequest<Todo[]>> {
return this.http.get<IRequest<Todo[]>>(this.createUrlTree(params));
}