There’s even more boilerplate we can save you, by creating an Akita entity service, which follows the standard RESTful naming conventions by default.
Specifically, this service can be extremely useful in systems that use strict url patterns, such as CMS, admin dashboards, etc.
After installing Akita, we simply run:
Let’s use JSONPlaceholder as our REST API and quickly scaffold a feature for Posts. To get started we run:
This schematics command generates an Akita
PostsService. First we need to define the base api url that will be used for each request. This is done when adding the service configuration to the module:
Note that if you have server calls that use a different base url than the one you defined in the above setting, you can modify the url per service, or use a factory if you dynamically generate the url based on other providers’ data. Our service looks like this:
This ensures that the service will automatically perform its CRUD operations on the
PostsStore we’ve generated. By extending
NgEntityService, we get a several built-in API calls without the need to add them ourselves:
delete(). Next, let’s create a component that uses those calls:
As you can see, since all the tasks of initalizing the requests and updating the store are all baked in to the entity service, all we need to do is call the relevant methods. Additionally, each method takes a config object where we can pass some or all of the following parameters:
resourceName used in the urls is by default identical to the store name, but we can easily configure it. For instance, if we want our posts service to fetch its posts from the articles url we can set it in the service config:
Alternatively, we can pass the config as the second parameter in the
super() call in the service’s constructor.
Entity Service Loader
Loading indication is a very common scenario — we often need to display to the user an indication that the server call has been made, and our app is currently in the process of loading the resulting data.
Akita’s Entity Service comes with a built-in solution for these cases; The
NgEntityServiceLoader can listen to any entity service’s built-in method and give us an indication of its loading status:
loaders object now contains loading indicators for each of the
PostsService methods; Each one holding an
observable boolean value, indicating the method’s loading status. Thanks to that we can create customized gui in the component’s template, based on those indicators :
We can also get indicators for a specific entity being updated or deleted by calling
Entity Service Notifier
In addition to that there are cases when we need to know whether certain operation has succeded or failed. For example, a global component that displays toast notifications to the user.
For this purpose the Entity Service package provides the
NgEntityServiceNotifier service, which we can subscribe to and get the status of any HTTP call that was made:
The resulting data looks like this:
The package also exposes built-in operators, which allow us to filter the
HTTP method. For example:
config provide takes the following object: