CRUD services in Angular with effortless aborting and caching

Henry Ruhs
Jan 18 · 3 min read

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

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.

Create

Describes a POST request to create a single resource.

Read

Describes a GET request to read a single resource.

Find

Describes a GET request to find multiple resources.

Update

Describes a PUT request to completely update a single resource.

Patch

Describes a PATCH request to partially update a single resource.

Delete

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.

1. Install

Install the dependencies.

npm install ngx-crud

2. Import

Import the CrudModule and HttpClientModule inside your AppModule.

3. Extend

Extend the ExampleService from the CrudService.

Take advantage of HttpHeaders or HttpParams utilities.

4. Ready

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.

Aborting

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

Caching

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

Batching

This feature is planned for the next major release. Meanwhile, I suggest to use mergeMap or forkJoin 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.

Summary

  • 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

Links

Henry Ruhs

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade