Biblioteche Angular

Le librerie Angular sono costruite come soluzione di problemi generali come presentare un’interfaccia utente unificata, presentare dati e permettere l’inserimento di dati. Gli sviluppatori possono creare soluzioni generali per domini particolari che possono essere adattati per il riutilizzo in diverse applicazioni. Queste soluzioni possono essere costruite come librerie Angular e queste librerie possono essere pubblicate e condivise come pacchetti npm.

Una libreria Angular è un progetto Angular ma è diversa dall’app Angular nel senso che non può essere eseguita da sola. Viene importata e utilizzata nell’app.

Utilizzo delle librerie Angular

• Le librerie Angular estendono le funzionalità di base di Angular. Per esempio, se vuoi aggiungere dei moduli reattivi a un’applicazione, aggiungi il pacchetto di librerie usando ng add @angular/forms, poi importa il ReactiveFormsModule dalla libreria @angular/forms nel codice della tua applicazione.
• Angular Material è un esempio di una grande libreria di uso generale che fornisce componenti UI sofisticati, riutilizzabili e adattabili.

Installazione delle librerie

Le librerie sono pubblicate come pacchetti npm e integrate con Angular CLI. Per integrare il codice riutilizzabile delle librerie in un’applicazione, dobbiamo installare il pacchetto e importare la funzionalità fornita dove la useremo.

Sintassi

Il comando ng add usa il gestore di pacchetti npm per installare il pacchetto di librerie, e invoca gli schemi che sono inclusi nel pacchetto per altre impalcature all’interno del codice del progetto, come l’aggiunta di dichiarazioni di importazione, font, temi e così via.

Dattilografia della libreria

I pacchetti delle librerie includono tipizzazioni nei file .d.ts. Se il pacchetto della tua libreria non include tipizzazioni e l’IDE mostra un errore, devi installare il pacchetto @types/ associato alla libreria.

Per esempio, supponiamo che abbiate una libreria chiamata d1:

I tipi definiti in un pacchetto @types/ per una libreria installata nello spazio di lavoro sono automaticamente aggiunti alla configurazione di TypeScript per il progetto che usa quella libreria. TypeScript cerca i tipi nella cartella node_modules/@types per impostazione predefinita, quindi non è necessario aggiungere ogni pacchetto di tipi individualmente.

Se una libreria non contiene tipi in @types/, puoi comunque usarla aggiungendo manualmente i tipi per essa. Puoi farlo come segue:

Crea un file typings.d.ts nella tua cartella src/. Questo file è automaticamente incluso come definizione globale del tipo.

Aggiungi il seguente codice in src/typings.d.ts.

Aggiungi il seguente codice nel componente o nel file che usa la libreria:

Aggiornamento delle librerie

Puoi aggiornare le librerie usando il comando ng update. Aggiorna le singole versioni delle librerie. Angular CLI controlla l’ultima versione pubblicata della libreria, e se trova che l’ultima versione è più nuova di quella installata, la scarica e aggiorna il tuo package.json per adattarlo all’ultima versione.

Sintassi

Nota: Quando aggiorni Angular ad una nuova versione, devi assicurarti che tutte le librerie che stai usando siano attuali. Se le librerie hanno interdipendenze, anch’esse devono essere aggiornate.

Come aggiungere una libreria all’ambito globale di runtime

Le librerie JavaScript Legacy che non sono importate in un’app possono essere aggiunte all’ambito globale di runtime e caricate come se fossero in un tag script. Devi configurare la CLI per fare questo al momento della compilazione usando le opzioni “scripts” e “styles” del target di compilazione nel file di configurazione della CLI, angular.json.

Per esempio, per usare la libreria Bootstrap 4, prima installa la libreria e le sue dipendenze usando il gestore di pacchetti npm:

Aggiungi il file CSS di Bootstrap all’array “styles”:

Creazione di nuove librerie

Puoi creare e pubblicare le tue nuove librerie per estendere le funzionalità di Angular. È generalmente usato quando hai bisogno di risolvere lo stesso problema in più di un’app (o vuoi condividere la tua soluzione con altri sviluppatori), hai un candidato per una libreria.

Per esempio: Puoi creare un pulsante che invia gli utenti al sito web della tua azienda che verrebbe incluso in tutte le app che la tua azienda costruisce.

Apri Angular CLI e usa la seguente sintassi per creare una nuova libreria.

Sintassi

Questo creerà una cartella projects/my-lib nel tuo spazio di lavoro, che contiene un componente e un servizio dentro un NgModule. Il file di configurazione dello spazio di lavoro, angular.json, viene aggiornato con un progetto di tipo ‘library’.

Ora, puoi costruire, testare e fare il lint del tuo progetto usando i seguenti comandi: