Routing resolver and download animation

In Angular there are several ways to load data into the component. One of the little known and rarely used mechanisms is the so-called resolver. This word, in my opinion, cannot be translated meaningfully into Polish, so I will use this name in the whole article. From this entry you will learn what the advantages and disadvantages of using the resolver, what are the alternatives, and how to easily implement the data loading animation.

Asynchronous reading of data

Angular applications are equipped with their own routing mechanism, i.e. the mechanism of linking individual components of the application with Internet addresses. When loading a component, it is very often necessary to read data from external sources. It can be e.g. user profile or dictionaries used in the form.

Applications designed in Angulara are the so-called SPA pages (single page application). They are characterized by, among others, dynamic reading of data on request. This means that requests sent to the API server are of the XHR (Asynchronous Javascript and XML) type. In the past, AJAX technology had to be used to handle these requests. The Angular programming platform provides programmers with ready-to-use services that simplify reading data from the API. This is, among others, the $http service and (since the Angular version >=4.3.0) its newer equivalent of $httpClient. They are typical facades superimposed on AJAX technology.

Reading data to the component

When loading a component associated with a given routing we have two options to read the data. The first one is to use a resolver, and the second one is to directly query the data service, e.g. in the constructor or the OnInit method. Using $http or $httpClient services in component class is not taken into consideration at all, because the data source layer should be independent of business logic.

Creating a data service

Regardless of which option you choose, you need a service that returns the data. In most cases it will query the back end or any other API for data, which it will then pass to the component. If we consider Angular architecture as a model view-model (MVVM) then services should be seen as a model layer. It should meet the following features:

Can retrieve and manipulate data

can’t know anything about the view
should encapsulate the logic of the application (but not necessarily business logic any more)
Therefore, Angulo services should retrieve data, process them and return them to other application layers without any interference with the view.

Data service enquiries

The most popular method for reading data is to query the service that returns data directly in the constructor of a given component. It is a simple and often used solution.


Leave a Reply

Your email address will not be published. Required fields are marked *