angular services - Jorge-Dacal/devonfw-tutorial-sources GitHub Wiki

In this chapter, we are going to see how services work and how we can work with them.

From Angular’s main page:

"Service is a broad category encompassing any value, function, or feature that your application needs.

Almost anything can be a service. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.

There is nothing specifically Angular about services. Angular has no definition of a service. There is no service base class, and no place to register a service.

Yet services are fundamental to any Angular application. Components are big consumers of services."

Services are often created in a shared folder, with the purpose of containing all the logic regarding a component or a complex type of operation. As an example, in the case of MyThaiStar, all the components which call to the server or have methods with more complex logic have their own service to implement them, but also there are services which instead of being related to just one component, they are needed several times trough the code in many components, like the price calculator.

Like components, services have to be declared in a NgModule too, in this case, in the providers array.

From Angular architecture docs:

"Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.

When Angular creates a component, it first asks an injector for the services that the component requires.

An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component’s constructor with those services as arguments. This is dependency injection."

For more information: Angular DI

Security or other global services will be stored in a shared folder at the same level of the rest of the components, but the services that are specific to a certain component will be in a shared folder too, but inside of that certain component. We can indicate the path to create our services when creating them using angular/cli

ng generate service <path>/<service-name>

Authentication is a special service created to maintain user session in the application, in the tutorial case is serves just as an indicator of the logged state and the name of the user, but it can be extended to store tokens, validate permission of roles and so on.

Basically is a service created with the objective of manage what the user can or can not see depending on their actions in the application.

Guards are services that implement an interface called CanActivate, this interface forces to implement a canActivate method which returns a boolean. Is up to you decide what conditions are you going to implement to forbid the navigation to a certain component, but the fact is you can implement it there and then return if the navigation can be done returning true or can not be done returning false.

Guards are strongly related to Router, because are the routes who will consume them adding the property canActivate:[GuardServiceName] to each route to be protected, you can create as many guards as you want to secure every single component as desired.

If your application will have a login process, or special areas not accessible to everyone. We encourage to use Guards, because even if you hide the button to navigate, the user can modify the URL in the browser and have access to the component, with guards implemented, this navigation will be forbidden and you app not compromised.

Angular uses HTTP to communicate with the server, but what the call return is an object from the library RxJS, which is a third party library endorsed by Angular to manage asynchronous calls based on the Observable pattern.

You do not have to install the package because it comes with the creation of the project with the angular/cli, you just have to import the correct operators and modules to use it correctly.

Observables work as follows:

1. First you make a HTTP call to your server URL calling for a service, the server will return an Observable that you can work with it using methods that you can find in the API, the most common is .map to convert the response to JSON and have easy access to data the server may send to you.

2. When already implemented all the operators to the Observable, the function should return the whole Observable in order to the component that consumes the service, can subscribe to this function to obtain the data.

3. The component call to this service function subscribing to the Observable returned. Subscribe is a function that accepts three properties, the first one is a function with the data if everything went correctly, the second one is a failure function that will execute is something failed and one last event that triggers when the Observable finished.

This is the most common workflow with Observables. Take into account that if you put some code after the Subscribe, it will be probably executed before the subscribe ends, if you need something to be executed after the subscribe function, you should put it inside of the subscription.

Here you can find more information about RxJs and Observables coming from the main page of Angular.

Next chapter: Build your own devon4ng application