Angular-biblioteker

Angular-biblioteker er bygget som en løsning på generelle problemer som f.eks. at præsentere en ensartet brugergrænseflade, præsentere data og tillade dataindtastning. Udviklere kan skabe generelle løsninger til bestemte domæner, som kan tilpasses til genbrug i forskellige apps. Disse løsninger kan bygges som Angular-biblioteker, og disse biblioteker kan offentliggøres og deles som npm-pakker.

Et Angular-bibliotek er et Angular-projekt, men det adskiller sig fra Angular-appen på den måde, at det ikke kan køre på egen hånd. Det importeres og bruges i appen.

Brug af Angular-biblioteker

• Angular-biblioteker udvider Angular-biblioteker Angular’s basisfunktionaliteter. Hvis du f.eks. vil tilføje reaktive formularer til en app, skal du tilføje bibliotekspakken ved hjælp af ng add @angular/forms og derefter importere ReactiveFormsModule fra biblioteket @angular/forms i din programkode.
• Angular Material er et eksempel på et stort, generelt bibliotek, der leverer sofistikerede, genanvendelige og tilpasselige brugergrænsefladekomponenter.

Installation af biblioteker

Bibliotekerne offentliggøres som npm-pakker og integreres med Angular CLI. For at integrere genanvendelig bibliotekskode i en applikation skal vi installere pakken og importere den leverede funktionalitet, hvor vi skal bruge den.

Syntaks

Kommandoen ng add bruger npm-pakkehåndteringen til at installere bibliotekspakken og påkalder de skemaer, der er inkluderet i pakken, til andre stilladser i projektkoden, f.eks. tilføjelse af importangivelser, skrifttyper, temaer osv.

Library typing

Bibliotekspakker indeholder typings i .d.ts-filer. Hvis din bibliotekspakke ikke indeholder typeringer, og IDE viser en fejl, skal du installere bibliotekets tilknyttede @types/-pakke.

Tænk hvis du f.eks. har et bibliotek ved navn d1:

Typer, der er defineret i en @types/-pakke for et bibliotek, der er installeret i arbejdsområdet, tilføjes automatisk til TypeScript-konfigurationen for det projekt, der bruger det pågældende bibliotek. TypeScript leder som standard efter typer i mappen node_modules/@types, så du behøver ikke at tilføje hver enkelt typepakke individuelt.

Hvis et bibliotek ikke indeholder typebestemmelser i @types/, kan du stadig bruge det ved manuelt at tilføje typebestemmelser for det. Det kan du gøre på følgende måde:

Opret en fil typings.d.ts i din mappe src/. Denne fil medtages automatisk som global typedefinition.

Føj følgende kode til src/typings.d.ts.

Føj følgende kode til den komponent eller fil, der bruger biblioteket:

Opdatering af biblioteker

Du kan opdatere bibliotekerne ved at bruge ng update-kommandoen. Den opdaterer de enkelte biblioteksversioner. Angular CLI kontrollerer den seneste offentliggjorte udgave af biblioteket, og hvis den finder, at den seneste version er nyere end din installerede version, downloader den den og opdaterer din package.json, så den passer til den seneste version.

Syntaks

Bemærk: Når du opdaterer Angular til en ny version, skal du sikre dig, at alle biblioteker, du bruger, er aktuelle. Hvis biblioteker har indbyrdes afhængigheder, skal de også opdateres.

Sådan tilføjer du et bibliotek til det globale kørselstidsområde

Legacy JavaScript-biblioteker, der ikke er importeret i en app, kan tilføjes til det globale kørselstidsområde og indlæses, som om de var i et scripttag. Du skal konfigurere CLI’en til at gøre dette på byggetidspunktet ved hjælp af indstillingerne “scripts” og “styles” for build-målet i CLI-konfigurationsfilen angular.json.

For eksempel skal du for at bruge Bootstrap 4-biblioteket først installere biblioteket og dets afhængigheder ved hjælp af npm-pakkehåndteringsprogrammet:

Føj Bootstrap CSS-filen til arrayet “styles”:

Skabelse af nye biblioteker

Du kan oprette og udgive dine egne nye biblioteker for at udvide Angular-funktionaliteterne. Det bruges generelt, når du har brug for at løse det samme problem i mere end én app (eller ønsker at dele din løsning med andre udviklere), har du en kandidat til et bibliotek.

For eksempel: Du kan oprette en knap, der sender brugerne til din virksomheds websted, og som skal indgå i alle de apps, som din virksomhed bygger.

Åbn Angular CLI, og brug følgende syntaks til at oprette et nyt bibliotek.

Syntaks

Dette vil oprette en mappe projects/my-lib i dit arbejdsområde, som indeholder en komponent og en tjeneste i et NgModule. Konfigurationsfilen for arbejdsområdet, angular.json, opdateres med et projekt af typen “library”.

Nu kan du bygge, teste og lint dit projekt ved hjælp af følgende kommandoer: