Angular Bibliotheken

Angular bibliotheken zijn gebouwd als oplossing voor algemene problemen, zoals het presenteren van een uniforme gebruikersinterface, het presenteren van gegevens, en het toestaan van gegevensinvoer. Ontwikkelaars kunnen algemene oplossingen creëren voor bepaalde domeinen die kunnen worden aangepast voor hergebruik in verschillende apps. Deze oplossingen kunnen worden gebouwd als Angular bibliotheken en deze bibliotheken kunnen worden gepubliceerd en gedeeld als npm packages.

Een Angular bibliotheek is een Angular project, maar het verschilt van de Angular app in de termen dat het niet op zichzelf kan draaien. Het wordt geïmporteerd en gebruikt in de app.

Gebruik van Angular-bibliotheken

• Angular-bibliotheken breiden de basisfunctionaliteiten van Angular uit. Als u bijvoorbeeld reactieve formulieren aan een app wilt toevoegen, voegt u het bibliotheekpakket toe met ng add @angular/forms en importeert u vervolgens de ReactiveFormsModule uit de @angular/forms-bibliotheek in uw applicatiecode.
• Angular Material is een voorbeeld van een grote, algemene bibliotheek die geavanceerde, herbruikbare en aanpasbare UI-componenten biedt.

Bibliotheken installeren

Bibliotheken worden gepubliceerd als npm-pakketten en geïntegreerd met Angular CLI. Om herbruikbare bibliotheekcode in een toepassing te integreren, moeten we het pakket installeren en de geboden functionaliteit importeren waar we het zullen gebruiken.

Syntax

Het ng add commando gebruikt de npm package manager om het bibliotheekpakket te installeren, en roept schema’s op die in het pakket zijn opgenomen om andere steigers binnen de projectcode, zoals het toevoegen van import statements, lettertypen, thema’s, enzovoort.

Bibliotheektypering

Bibliotheekpakketten bevatten typeringen in .d.ts-bestanden. Als het pakket van uw bibliotheek geen typeringen bevat en de IDE een foutmelding geeft, moet u het bijbehorende @types/-pakket van de bibliotheek installeren.

Voor stel bijvoorbeeld dat u een bibliotheek hebt met de naam d1:

Typen die in een @types/-pakket voor een bibliotheek zijn gedefinieerd die in de werkruimte is geïnstalleerd, worden automatisch toegevoegd aan de TypeScript-configuratie voor het project dat die bibliotheek gebruikt. TypeScript zoekt standaard naar types in de map node_modules/@types, zodat u niet elk typepakket afzonderlijk hoeft toe te voegen.

Als een bibliotheek geen typeringen in @types/ bevat, kunt u deze toch gebruiken door er handmatig typeringen voor toe te voegen. U kunt dit als volgt doen:

Maak een bestand typings.d.ts in uw map src/. Dit bestand wordt automatisch opgenomen als globale typedefinitie.

Voeg de volgende code toe in src/typings.d.ts.

Voeg de volgende code toe in het component of bestand dat de bibliotheek gebruikt:

Bibliotheken bijwerken

U kunt de bibliotheken bijwerken met het commando ng update. Het werkt individuele bibliotheekversies bij. De Angular CLI controleert de laatst gepubliceerde versie van de bibliotheek, en als het vindt dat de laatste versie nieuwer is dan uw geïnstalleerde versie, downloadt het en werkt uw package.json bij om overeen te komen met de laatste versie.

Syntax

Note: Wanneer u Angular bijwerkt naar een nieuwe versie, moet u ervoor zorgen dat alle bibliotheken die u gebruikt, actueel zijn. Als bibliotheken van elkaar afhankelijk zijn, moeten deze ook worden bijgewerkt.

Hoe voeg ik een bibliotheek toe aan de runtime global scope

Legacy JavaScript-bibliotheken die niet in een app zijn geïmporteerd, kunnen worden toegevoegd aan de runtime global scope en worden geladen alsof ze in een scripttag staan. Je moet de CLI configureren om dit te doen tijdens het bouwen met behulp van de “scripts” en “stijlen” opties van het build doel in het CLI configuratie bestand, angular.json.

Om bijvoorbeeld de Bootstrap 4 bibliotheek te gebruiken, installeer je eerst de bibliotheek en zijn afhankelijkheden met behulp van de npm package manager:

Voeg het Bootstrap CSS bestand toe aan de “styles” array:

Nieuwe bibliotheken maken

U kunt uw eigen nieuwe bibliotheken maken en publiceren om Angular functionaliteiten uit te breiden. Het wordt over het algemeen gebruikt wanneer u nodig hebt om hetzelfde probleem op te lossen in meer dan een app (of wilt u uw oplossing te delen met andere ontwikkelaars), heb je een kandidaat voor een bibliotheek.

Voorbeeld: U kunt een knop maken die gebruikers naar uw bedrijfswebsite stuurt, die zou worden opgenomen in alle apps die uw bedrijf bouwt.

Open Angular CLI en gebruik de volgende syntaxis om een nieuwe bibliotheek te maken.

Syntax

Dit zal een projecten/mijn-lib-map in uw werkruimte maken, die een component en een service binnen een NgModule bevat. Het configuratiebestand van de werkruimte, angular.json, wordt bijgewerkt met een project van het type ‘library’.

Nu kunt u uw project bouwen, testen en lint met de volgende commando’s: