Angular : Création d'un service

 -- Comment utiliser?

--Services.

--Injection des dépendances.

Injection des dépendances:

Le principe de ce pattern est de casser les dépendances entre les éléments.

Donc avoir une couplage faible entre les élements et ainsi permettre une meiulleur maintenance. et facilite l'ecriture des tests.

Dans le cadre d’Angular, un composant peut avoir besoin d’un service, on dit alors que le composant est dépendant du service. Le framework Angular joue alors le rôle de gestionnaire de dépendances.

Angular implemente une fonctionnalité qui permet d'utiliser ce mecanisme.

-- Le Framework Angular récupere les informations du service dont-il a besoin à partir de la proprietes "provider" du décorateur @NgModule, qui est le niveau le plus haut de l'application.

Lorsqu’un service est déclarée à ce niveau de l’application est généralement un singleton, à chaque fois qu’un élément du Framework demande ce service, ce sera la même instance qui lui sera retournée. Les dépendances déclarées à ce niveau agissent donc comme des singletons.

-- Si nous voulons crées des instances unique à chaque composants, il faut utiliser la propriété "provider" du décorateur @Component

Services Angular:

Dans l'architecture Angular L’objectif d’un service est de contenir toute la logique métier de l’application.

-- Le service doit avoir une seul responsabilité.

-- On peut injecter un service à l'aide l'annotation @Injectable.

 Ce décorateur n’est donc pas obligatoire lorsque le service ne possède aucune dépendance, mais le mettre dans tous les cas est une bonne pratique que nous vous conseillons.

 Création d'un service : cd src/app/login/

 Angular CLI : ng g service authetification

 crée : authentification.service.spec et authentification.service.ts

 Annotée @Injectable

 Pour utiliser ce service il faut le fournir dans la proprietes "providers" de @NgModule du module LoginModule.

 Donc, il faut import {AuthentificationService} from './authentification.service';

 Puis : providers: [AuthentificationService], dans @NgModule

 Pour pouvoir utiliser le service dans authentification.component, il faut :

 import {AuthentificationService} from '../authentification.service';

 Puis, dans le constructeur : constructor(public authentificationService: AuthentificationService)

 Nous mettons l'accesseur à public pour qu'il soit visible par tout les composants.

 Maintenant, nous allons utiliser le service et lui demander si un utilisateur et login ou non?

 this.authentificationService.isLoggedIn(this.username);

 Maintenant, créons la variable username:

 username = 'Naoufal';

 // Variable qui affiche le message retournée par le service

 isLoggedIn: boolean = false;

  ngOnInit() {

    this.isLoggedIn = this.authentificationService.isLoggedIn(this.username);

  }

  

  Pour afficher la variable isLoggedIn, nous devons modifier le fichier authetification.component.html

  Composant d'authentification !

  {{username}} -- {{isLoggedIn}}

-- Les informations sont afficher correctement.

Pour s'assurer que l'appel au service se fait correctement, nous allons changer le username.