CRUD services in Angular with effortless aborting and caching

Developers are frequently using CRUD as an acronym for the fundamental operations Create, Read, Update and Delete in terms of data management.

Image for post
Image for post

Unfortunately, there are a bunch of HTTP operations and derivates that are not properly covered — in this article you’ll hear about Find and Patch aswell.

Describes a POST request to create a single resource.

Describes a GET request to read a single resource.

Describes a GET request to find multiple resources.

Describes a PUT request to completely update a single resource.

Describes a PATCH request to partially update a single resource.

Describes a DELETE request to delete a single resource.

Problem

Boilerplate for each service

Full featured CRUD services in Angular require tons of boilerplate as there is the need to implement each operation by a representative method.

In case you were thinking it couldn’t get worse — wait until HttpHeaders or HttpParams come into play.

Most Angular developers have been at this point and properly came up with the idea that yet another base service is going to solve their misery.

Solution

Write beautiful facade services

To be fair, something like that underestimated base service has been the initial foundation of ngx-crud —a HTTP library for Angular.

Let’s get started with CRUD services in less than 5 minutes.

Install the dependencies.

npm install ngx-crud

Import the CrudModule and HttpClientModule inside your AppModule.

Extend the ExampleService from the CrudService.

Take advantage of HttpHeaders or HttpParams utilities.

That’s it! You successfully implemented the Create, Read, Find, Update, Patch and Delete operation to the ExampleService.

These operations are just a fragment, explore the complete API on GitHub.

Performance

Unleash the full potential

Aborting, caching and batching requests are pretty important features missing in the HTTPClient when it comes to high performance applications.

Luckily, ngx-crud provides at least some of the missing features.

One signal for each request is stored to the AbortService. These signals exist for a certain lifetime unless they are programmatically aborted.

One response for each request is stored to the CacheService. These responses exist for a certain lifetime unless they are programmatically flushed.

This feature is planned to be finished in the next major release. Meanwhile, I highly recommend to fire requests in parallel.

Conclusion

Find a suitable approach

Who would have thought that CRUD services in Angular turn out to be a challenging task? There is nothing wrong with the popular base service approach until a project reaches a certain point of complexity.

Therefore, consider ngx-crud over an extensive implementation.

  • Getting started with CRUD and beyond
  • Reduce tons of boilerplate with facade services
  • Take advantage of HttpHeaders or HttpParams utilities
  • Effortless aborting and caching in Angular

CMS Founder + Frontend Architect + JavaScript Evangelist + WPO Expert + GitHub Fanboy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store