Injecter le document dans le service en Angular

Muhammad Adil 30 janvier 2023
  1. Injecter le document dans le service en Angular
  2. Étapes pour injecter un document dans le service dans Angular
Injecter le document dans le service en Angular

Angular possède de nombreuses fonctionnalités qui en font un bon choix pour développer des applications Web. L’une de ces fonctionnalités est l’injection de dépendances, ce qui facilite la configuration et la maintenance d’une application.

Dans Angular, l’injection de dépendances (DI) est le processus consistant à fournir à un objet dépendant ses dépendances soit en les passant du constructeur, soit en les fournissant d’une autre manière. L’injection de dépendances peut aider à écrire des codes plus testables, maintenables et extensibles.

Injecter le document dans le service en Angular

L’injection de documents dans le service est un moyen de lire et d’analyser le contenu HTML. Ce processus peut être utilisé pour capturer des données de la page, analyser des balises spécifiques ou même déterminer la structure du document.

Il est utile car il récupère toutes les ressources externes nécessaires pour afficher une page Web. Cela inclut les scripts et les feuilles de style liés au document HTML.

L’extrait de code suivant montre comment procéder :

import { Document } from '@angular/core';

Étapes pour injecter un document dans le service dans Angular

Voici les étapes pour injecter le document dans le service dans Angular :

  • Créez un module Angular et importez HttpModule depuis @angular/http et DocumentService.
  • Créez une classe de service qui s’étend de la classe DocumentService.
  • Ajouter l’objet du service à l’annotation @Injectable() dans le constructeur de la classe service.
  • Utilisez ce nouveau service de document injecté dans le composant en l’injectant dans la liste des paramètres du constructeur.

Exemple:

Code TypeScript :

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular';
    constructor(@Inject(DOCUMENT) private document: Document){}
    public save(): void{
        document.execCommand('save');
    }
}

Code HTML:

<h2>Example of Injecting Document in Service</h2>
<input type="text">
<button (click)="save()">save</button>

L’injection de documents dans un service présente de nombreux avantages. L’un des principaux avantages est qu’il permet une plus grande flexibilité quant à la manière dont le document est stocké et accessible.

Cela signifie également que le document peut être mis à jour ou modifié en temps réel au lieu d’être stocké sur un serveur où les mises à jour doivent être appliquées manuellement.

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Article connexe - Angular Service