Le moyen le plus simple d’ajouter des dépendances externes à vos projets angulaires consiste à npm. La deuxième meilleure option consiste à ajouter des balises de script à la page Web qui héberge l’application. Cependant, cette option ne fonctionne que si vous avez accès à la page hôte. Sinon, vous devrez charger vos fichiers JavaScript de manière dynamique. C’est en fait assez facile à faire en JavaScript ; dans Angular, vous devez utiliser certains de ses objets intégrés pour l’accomplir. Dans ce didacticiel, nous allons apprendre quelques stratégies pour attacher des fichiers JS externes à l’aide d’un service personnalisé.
Stratégie 1 : ajouter un script à l’aide du src Attribut
De nombreuses bibliothèques JavaScript sont disponibles via des réseaux de diffusion de contenu (CDN). Ceux-ci sont optimisés pour servir les bibliothèques JS très rapidement. Il existe quelques gros CDN qui hébergent plusieurs bibliothèques JS (comme le CDN de Google et cdnj); d’autres bibliothèques ont leur propre CDN dédié. Pour les besoins de ce didacticiel, nous allons charger la bibliothèque cliente des API Google pour le navigateur JavaScript, également appelée GAPI. Il s’agit d’un ensemble de bibliothèques clientes permettant d’appeler des API Google dans divers langages tels que Python, Java et Node. Il est utilisé dans Google Sign-in, Google Drive et des milliers de pages Web internes et externes pour se connecter facilement aux API Google.
Notre service ajoutera un SCÉNARIO au corps du document et définissez le src attribut à “https://apis.google.com/js/api.js ».
Le service de script
Pour atteindre son objectif, le ScriptService requiert deux choses :
- une référence au corps du document
- une façon de créer des éléments
Nous pouvons accéder aux éléments des composants à l’aide de décorateurs tels que VoirEnfant, VoirEnfants, mais pour référencer le document lui-même, nous pouvons injecter l’objet Document via le constructeur. Cela nous permettra d’ajouter le script au document.corps.
Angular fournit la classe Renderer2 pour implémenter un rendu personnalisé. En tant que tel, il a tout ce dont vous avez besoin pour travailler avec des éléments DOM, y compris un ajouterEnfant() méthode. Nous le transmettrons directement à loadJsScript() du composant appelant.
Voici le code de service complet :
import { Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
export class ScriptService {
constructor(
@Inject(DOCUMENT) private document: Document
) { }
/**
* Append the JS tag to the Document Body.
* @param renderer The Angular Renderer
* @param src The path to the script
* @returns the script element
*/
public loadJsScript(renderer: Renderer2, src: string): HTMLScriptElement {
const script = renderer.createElement('script');
script.type="text/javascript";
script.src = src;
renderer.appendChild(this.document.body, script);
return script;
}
}
Invocation de la méthode loadJsScript () dans Angular et JavaScript
Dans le AppComponent, nous appellerons le loadJsScript() méthode et utilisez notre nouveau script. Renderer2 et ScriptService sont tous deux injectés en tant qu’arguments de constructeur. Puis dans ngOnInit, nous appellerons loadJsScript(). Il renvoie l’élément de script sous la forme d’un Élément HTMLScript. Cela nous donne accès à de nombreuses propriétés et méthodes qui facilitent grandement le travail avec le script. Par exemple, nous pouvons lier des méthodes au en charge et une erreur événements.
Un piège qui frustre souvent les développeurs qui sont nouveaux dans le chargement de script dynamique dans Angular est que TypeScript ne vous permettra pas de référencer l’objet de script global (tel que $ dans jQuery) car il ne sait pas ce que c’est. Vous ne pouvez pas le définir en utilisant const ou alors laisser, car cela vous obligerait à le préfixer avec ce., qui ne fait pas référence à la variable globale, mais à celle définie au niveau du composant. Au lieu de cela, nous devons déclarer et lui donner un type de tout, c’est à dire declare let gapi: any;.
Voici donc l’intégralité AppComponent code:
import { Component, OnInit, Renderer2 } from "@angular/core";
import { ScriptService } from "./services/script.service";
const SCRIPT_PATH = 'https://apis.google.com/js/api.js';
declare let gapi: any;
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
constructor(
private renderer: Renderer2,
private scriptService: ScriptService
) { }
ngOnInit() {
const scriptElement = this.scriptService.loadJsScript(this.renderer, SCRIPT_PATH);
scriptElement.onload = () => {
console.log('Google API Script loaded');
console.log(gapi);
// Load the JavaScript client library.
// (the init() method has been omitted for brevity)
gapi.load('client', this.init);
}
scriptElement.onerror = () => {
console.log('Could not load the Google API Script!');
}
}
}
Stratégie 2 : ajouter un script de bloc de données à l’aide du texte Attribut
Dans certains cas, l’élément de script est utilisé comme bloc de données, qui contient JSON-LD (type=”application/ld+json”). JSON-LD est une sérialisation RDF (Resource Description Framework) qui vous permet de publier des données liées (ou structurées) à l’aide de JSON. Ces données structurées peuvent être utilisées par tout consommateur intéressé. Voici un exemple de script :
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "http://website.com",
"name": "wbs",
"description": "Web Studio"
}
</script>
Le code de service pour ajouter un script JSON-LD n’est pas très différent de JavaScript ; en plus du type différent, il définit le texte du script sur les résultats de la JSON.stringify() méthode. Il convertit un objet JSON en une chaîne JSON :
public setJsonLd(renderer: Renderer2, data: any): void {
let script = renderer.createElement('script');
script.type="application/ld+json";
script.text = `${JSON.stringify(data)}`;
renderer.appendChild(this.document.body, script);
}
Notez que le setJsonLd() la méthode ne renvoie pas de Élément HTMLScript, puisque le contenu du script est local et sera disponible dès qu’il sera ajouté au document.
const JSON_LD_DATA = `
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "http://website.com",
"name": "wbs",
"description": "Web Studio"
}
`;
ngOnInit() {
this.scriptService.setJsonLd(this.renderer, JSON_LD_DATA);
console.log('JSON_LD_DATA Script loaded');
}
Vous trouverez la démo complète de ce tutoriel sur codesandbox.io.
Lire : Comment optimiser les applications angulaires
Conclusion
Dans ce didacticiel, nous avons appris quelques stratégies pour attacher des fichiers JS externes à l’aide des objets intégrés d’Angular. Bien que npm est toujours le moyen préféré pour importer des bibliothèques externes dans vos projets, les techniques présentées ici aujourd’hui fourniront une excellente alternative.
— to www.htmlgoodies.com
Jeu de briques
Snake
Pacman
Bubble