Il modo più semplice per aggiungere dipendenze esterne ai tuoi progetti Angular è attraverso npm. La seconda opzione migliore è aggiungere tag di script alla pagina Web che ospita l’applicazione. Tuttavia, questa opzione funziona solo se hai accesso alla pagina host. A parte ciò, dovrai caricare i tuoi file JavaScript in modo dinamico. In realtà è abbastanza facile da fare in JavaScript; in Angular, devi utilizzare alcuni dei suoi oggetti incorporati per realizzarlo. In questo tutorial, impareremo un paio di strategie per allegare file JS esterni utilizzando un servizio personalizzato.

Strategia 1: aggiungi uno script usando il src Attributo

Molte librerie JavaScript sono disponibili tramite reti di distribuzione dei contenuti (CDN). Questi sono ottimizzati per servire le librerie JS molto rapidamente. Ci sono alcuni grandi CDN che ospitano più librerie JS (come il CDN di Google e cdnjs); altre biblioteche hanno il proprio CDN dedicato. Ai fini di questo tutorial, caricheremo la libreria client delle API di Google per browser JavaScript, nota anche come GAPI. È un insieme di librerie client per chiamare le API di Google in una varietà di linguaggi come Python, Java e Node. Viene utilizzato in Google Sign-in, Google Drive e migliaia di pagine Web interne ed esterne per connettersi facilmente con le API di Google.

Il nostro servizio aggiungerà a SCRIPT taggare il corpo del documento e impostare il src attribuire a “https://apis.google.com/js/api.js”.

Il servizio di script

Per raggiungere il suo obiettivo, lo ScriptService richiede due cose:

1. un riferimento al corpo del documento
2. un modo per creare elementi

Possiamo accedere agli elementi dei componenti usando decoratori come VisualizzaBambino, VisualizzaBambini, ma per fare riferimento al documento stesso, possiamo iniettare l’oggetto Document tramite il costruttore. Questo ci permetterà di aggiungere lo script al document.body.

Angular fornisce la classe Renderer2 per implementare il rendering personalizzato. In quanto tale, ha tutto il necessario per lavorare con gli elementi DOM, incluso un appendChild() metodo. Lo passeremo direttamente a loadJsScript() dal componente chiamante.

Ecco il codice completo del servizio:

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;
  }
}

Invocare il metodo loadJsScript() in Angular e JavaScript

Nel Componente dell’app, chiameremo il loadJsScript() metodo e utilizzare il nostro nuovo script. Sia Renderer2 che ScriptService vengono iniettati come argomenti del costruttore. Poi, in ngOnInit, chiameremo loadJsScript(). Restituisce l’elemento script come an HTMLScriptElement. Questo ci dà accesso a numerose proprietà e metodi che rendono molto più semplice lavorare con lo script. Ad esempio, possiamo associare i metodi al caricare e errore eventi.

Un trucco che spesso frustra gli sviluppatori che non conoscono il caricamento dinamico degli script in Angular è che TypeScript non ti consente di fare riferimento all’oggetto di script globale (come $ in jQuery) perché non sa cosa sia. Non puoi definirlo usando cost o permettere, perché ciò richiederebbe di prefissarlo con questo., che non fa riferimento alla variabile globale, ma a quella definita a livello di componente. Invece, dobbiamo dichiarare e dagli un tipo di qualunque, cioè declare let gapi: any;.

Ecco allora il pieno Componente dell’app codice:

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!');
    }
  }
}

Strategia 2: aggiungere uno script di blocco dati utilizzando il testo Attributo

In alcuni casi, l’elemento script viene utilizzato come blocco dati, che contiene JSON-LD (type=”application/ld+json”). JSON-LD è una serializzazione Resource Description Framework (RDF) che consente di pubblicare dati collegati (o strutturati) utilizzando JSON. Questi dati strutturati possono essere utilizzati da qualsiasi consumatore interessato. Ecco uno script di esempio:

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "http://website.com",
    "name": "wbs",
    "description": "Web Studio"
}
</script>

Il codice del servizio per aggiungere uno script JSON-LD non è molto diverso da JavaScript; oltre al diverso tipo, imposta il testo dello script sui risultati del JSON.stringify() metodo. Converte un oggetto JSON in una stringa 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);
}

Notare che il setJsonLd() il metodo non restituisce an HTMLScriptElement, poiché il contenuto dello script è locale e sarà disponibile non appena verrà aggiunto al documento.

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');
}

Troverai la demo completa per questo tutorial su codeandbox.io.

Leggi: Come ottimizzare le applicazioni angolari

Conclusione

In questo tutorial abbiamo appreso un paio di strategie per allegare file JS esterni utilizzando gli oggetti incorporati di Angular. Sebbene npm è ancora il modo preferito per importare librerie esterne nei tuoi progetti, le tecniche presentate qui oggi forniranno un’ottima alternativa.