Angular er en open source JavaScript-ramme, der er bygget ved hjælp af TypeScript og optimeret til udvikling af webapplikationer med en enkelt side. Det er kendt for sin alsidighed, så udviklerne kan koncentrere sig om funktioner og funktionalitet. Ved at tilføje komponentbiblioteker til blandingen tilføjes endnu et lag effektivitet, hvilket forbedrer udviklingsproduktiviteten og den overordnede kvalitet af dine applikationer.
Det kan dog være svært at vælge det bedste bibliotek til dit projekt med så mange tilgængelige muligheder. I denne artikel gennemgås nogle af de mest nyttige Angular-komponentbiblioteker, hvordan de fungerer, og hvordan du kan integrere hvert enkelt af dem i din Angular-applikation.
Hvorfor bruge et komponentbibliotek?
Uanset om du selv bygger dem eller anvender biblioteker fra tredjeparter, udgør komponenter fundamentet for Angular-applikationer. Hver komponent er afhængig af en skabelon for dens HTML- og CSS-elementer og TypeScript-kode, der styrer dens adfærd.
Den vigtigste fordel ved komponentbiblioteker er, at de leverer genanvendelige, færdigbyggede brugergrænsefladekomponenter, hvilket reducerer behovet for brugerdefineret kode og hjælper udviklere med at få applikationer hurtigt op at køre.
Angular’s tilgang til komponenter kan også forbedre samarbejdet på tværs af teamet mellem programmører, der måske skriver TypeScript-kode, og webdesignere, der leverer HTML-koden til skabelonerne.
Biblioteker af komponenter tilføjes typisk til Angular-projekter ved hjælp af Node.js npm Node Package Manager eller ved hjælp af Angular’s egen kommandolinjeinterface (CLI).
Hvad gør et godt komponentbibliotek til et godt bibliotek?
Komponentbibliotekerne på vores liste er blevet udvalgt ud fra flere kriterier:
- De tilbyder et omfattende sæt af brugergrænsefladekomponenter, hvilket gør det nemt for udviklere hurtigt at skabe smukke og funktionelle applikationer.
- De er nemme at bruge og kan integreres med populære webudviklingsframeworks som Angular, React og Vue.
- De tilbyder god dokumentation og support, hvilket sikrer, at udviklere kan få hjælp, når der er behov for det.
- De vedligeholdes og opdateres aktivt, hvilket sikrer, at de holder sig ajour med de nyeste webteknologier og sikkerhedsstandarder.
9 smarte Angular-komponentbiblioteker
Lad os nu tage et nærmere kig på vores valg.
1. Angular Material
Angular Material er det officielle Angular-komponentbibliotek, der tilbyder en omfattende UI-samling og samtidig holder sig ajour med de seneste Angular-funktioner og API-ændringer. Det tilbyder også indbygget understøttelse af tilgængelighed og genererer markup for at muliggøre tastaturnavigation og vejlede hjælpeteknologier som skærmlæsere.
Sådan fungerer det: Angular Material udnytter Angular’s indbyggede direktiver og tjenester til at levere et sæt databundne og performante komponenter oven på Angular, hvilket gør det nemt at tilføje interaktivitet til webapplikationer.
Hvor det excellerer: Angular Material excellerer i at levere forudbyggede UI-komponenter, der følger Material Design-retningslinjerne. Det tilbyder et sæt veldesignede og tilpassede brugergrænsefladekomponenter, der nemt kan integreres i Angular-applikationer. Disse komponenter omfatter navigationsmenuer, knapper, formularer, dialogbokse og meget mere.
Hvis du f.eks. ønsker at tilføje en knapkomponent til din applikation, kan du blot bruge mat-button -direktivet og tilpasse det efter behov.
Her er et eksempel på et kodestykke:
<button mat-button color="primary">Click me!</button>Denne kode vil generere en knapkomponent med det primære farveskema. Du kan tilpasse knappen yderligere ved at tilføje event handlers, ændre teksten og ikonets udseende.
2. NG-Bootstrap
NG-Bootstrap er et open source-bibliotek, der er bygget oven på Bootstrap CSS, og som leverer komponenter og designmønstre, som mange udviklere allerede er bekendt med. Dette reducerer indlæringskurven for nye projekter og gør det til et pålideligt valg til at bygge Angular-applikationer hurtigt og effektivt.
Sådan fungerer det: NG-Bootstrap udvider Bootstrap-komponenternes muligheder ved at give udviklere mulighed for at bruge dem som Angular-direktiver med tovejs databinding og andre Angular-specifikke funktioner. Dette gør det nemt for udviklere at skabe responsive, mobilvenlige webapplikationer, der fungerer problemfrit med Angular.
Der hvor den udmærker sig: En af de vigtigste styrker ved NG-Bootstrap er understøttelsen af tilgængelighedsfunktioner, herunder W3C’s specifikationer for tilgængelige rige internetapplikationer (ARIA), hvilket gør det lettere for udviklere at skabe applikationer, der kan bruges af handicappede. NG-Bootstrap udmærker sig også på området for modale dialoger. Med ng-bootstrap Modal-komponenten kan udviklere nemt oprette modale dialoger med tilpassede muligheder såsom størrelse, baggrund og tastaturunderstøttelse.
Her er et eksempel på, hvordan man opretter en grundlæggende modal dialogboks ved hjælp af NG-Bootstrap:
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>
<button class="btn btn-primary" (click)="open(content)">Launch demo modal</button>I dette eksempel indeholder ng-template -elementet indholdet for den modale dialog, herunder header, body og footer. Button-elementet i slutningen af kodestumpen udløser åbningen af modalboksen, når der klikkes på det. Metoden open() bruges til at vise den modale dialog og tager ng-template -elementet som argument.
3. Clairty
Clarity er et open source-bibliotek, der anvender et fælles visuelt sprog på tværs af sine komponenter for at give en konsistent, intuitiv brugergrænseflade. Det er også udførligt dokumenteret med mange vejledninger, tutorials og API-referencer, hvilket gør det let at lære og bruge.
Sådan fungerer det: Clarity-designsystemet er baseret på begrebet “kort”, som bruges til at gruppere relateret indhold. Kort bruges til at repræsentere individuelle stykker indhold på en struktureret og organiseret måde. Clarity tilbyder en række kortkomponenter, der kan præsentere data i en række forskellige formater. Disse kortkomponenter omfatter headers, footers og indholdssektioner og kan nemt tilpasses med forskellige stilarter og temaer.
Kortene kan også kombineres med andre komponenter – f.eks. modaler, dropdowns og knapper – for at skabe mere komplekse UI-designs. Det overordnede mål med det kortbaserede design er at give et fleksibelt og modulært system til at skabe komplekse grænseflader med lethed.
Der hvor det excellerer: Claritys omfattende sæt af formularkontroller er en klar styrke. Disse kontroller omfatter indtastningsfelter, markeringsfelter, radioknapper og meget mere. Clarity tilbyder også et sæt datavisualiseringer, såsom søjlediagrammer, linjediagrammer og cirkeldiagrammer, som hjælper med at vise data på en klar og organiseret måde.
Her er et eksempel på, hvordan du kan bruge Clarity-inputfeltkomponenten i en HTML-formular:
<clr-input-container>
<label>Username</label>
<input clrInput placeholder="Enter your username">
</clr-input-container>Denne kode vil oprette et formularindtastningsfelt med en etiket og en pladsholdertekst. Direktiverne clr-input-container og clrInput leveres af Clarity-biblioteket og vil style indtastningsfeltet i overensstemmelse hermed.
4. Kendo UI
Kendo UI er et kommercielt bibliotek, der er bygget med ydeevne for øje, hvilket sikrer hurtige indlæsningstider og en jævn brugeroplevelse. Det tilbyder også temaer og stilindstillinger til at forbedre udseendet og indtrykket af din applikation samt omfattende dokumentation og et dedikeret supportteam.
Sådan fungerer det: Kendo UI bruger teknikker som virtualisering og lazy loading for at sikre hurtige indlæsningstider og en jævn brugeroplevelse. Det betyder, at applikationer, der er bygget med Kendo UI, er hurtige og responsive, selv når der er tale om store datasæt. Kendo UI følger også en modulær arkitektur, der gør det muligt for udviklere kun at bruge de komponenter, de har brug for, hvilket reducerer bibliotekets størrelse og forbedrer ydeevnen.
Hvor det excellerer: Kendo UI er særligt velegnet til applikationer på virksomhedsniveau, der kræver omfattende datahåndtering og komplekse brugerinteraktioner. Dens gitterkomponent understøtter f.eks. funktioner som filtrering, sortering og gruppering, så udviklerne kan præsentere store datasæt for brugerne på en overskuelig måde.
Her er et kodestykke af, hvordan du opretter et simpelt Kendo UI-grid i HTML:
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name" width="200"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="120"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock" width="120"></kendo-grid-column>
</kendo-grid>Denne kode vil vise et Kendo UI-gitter i din Angular-applikation. Du kan tilpasse gitteret ved at videregive forskellige konfigurationsindstillinger til kendo-grid -komponenten.
5. PrimeNG
PrimeNG er et open source-bibliotek, der er designet med henblik på brugervenlighed og tilpasning. Det indeholder også avancerede tilgængelighedsfunktioner og understøttelse af internationalisering, hvilket gør det til et godt valg til globale applikationer.
Sådan fungerer det: PrimeNG-biblioteket indeholder et sæt færdigbyggede UI-komponenter, som udviklere nemt kan integrere i deres Angular-applikationer. Det bruger Angular’s indbyggede direktiver og livscyklushooks til at give en problemfri integration med rammen. Det understøtter også forskellige konfigurationsmuligheder og tilpasninger, så udviklere kan tilpasse komponenterne til deres specifikke behov.
Hvor den udmærker sig: En af de vigtigste funktioner i PrimeNG er dens internationaliseringsunderstøttelse. Biblioteket understøtter flere sprog og tilbyder oversættelsestjenester for de fleste af dets komponenter. Dette opnås ved hjælp af Angular’s lokaliseringsramme og meddelelsesfiler, som nemt kan tilpasses og opdateres.
For at bruge internationalisering i PrimeNG skal du oprette oversættelsesfiler for de sprog, du ønsker at understøtte. Disse filer skal indeholde oversættelser for alle de komponenter, du ønsker at bruge i din applikation. For at aktivere internationalisering i PrimeNG skal du indstille translate -attributten for en komponent til true. Komponenten vil derefter bruge oversættelsesfilerne til at vise teksten på det sprog, som brugeren vælger.
Her er et eksempel på, hvordan du kan bruge komponenten p-calendar med internationaliseringsstøtte i PrimeNG:
<p-calendar [(ngModel)]="date" [showIcon]="true" [readonlyInput]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" [locale]="en"></p-calendar>I dette eksempel er translate -attributten for p-calendar -komponenten indstillet til true, og [locale] -attributten er indstillet til sprogkoden for engelsk (en). Dette sikrer, at kalenderen vises på engelsk for brugere, der har valgt dette sprog.
6. Nebular
Nebular er en samling af mere end 40 Angular UI-komponenter, der er tilgængelige i fire temaer, der kan tilpasses. Biblioteket, der er skabt af webudviklingsfirmaet Akveo, leveres også med et brugerautentifikationsmodul og et ACL-baseret sikkerhedsmodul til at kontrollere mere granulær adgang til specifikke ressourcer. Akveo kan også få dig i gang med at lave din egen applikation til administration af et dashboard med ngx-admin-sættet, der er bygget ved hjælp af Nebular-moduler.
Sådan fungerer det: Nebular’s UI-tilgang er baseret på specifikationerne i Akveos Eva Design System, hvortil der også leveres aktiver til teams, hvis arbejde begynder med designværktøjer som Sketch eller Figma.
Designere, der arbejder med Nebulars CSS, kan generelt henvise til stylingmuligheder semantisk – f.eks. farvevariablerne primary, success, info, warning og danger. Men brugere kan gå videre end det, Akveo har besluttet, at disse repræsenterer, ved at importere avanceret stylingtilpasning som Sass-filer.
Nebulars bibliotek af komponenter omfatter layouts, kort, lister, harmonikaer, navigationshjælpemidler, formularelementer, datatabeller, modaler og overlejringer samt widgets som spinnere, datovælgere og fremskridtsbjælker.
Metadataene for en Nebular harmonikakomponent kan se således ud TypeScript:
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'nb-accordion-demo',
templateUrl: './accordion-demo.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccordionDemoComponent {}Og dens skabelon kan se sådan ud:
<nb-accordion>
<nb-accordion-item>
<nb-accordion-item-header>First Item Heading</nb-accordion-item-header>
<nb-accordion-item-body>
Toggled content for First Item.
</nb-accordion-item-body>
</nb-accordion-item>
<nb-accordion-item>
<nb-accordion-item-header>Second Item Heading</nb-accordion-item-header>
<nb-accordion-item-body>
Toggled content for Second Item.
</nb-accordion-item-body>
</nb-accordion-item>
</nb-accordion>Hvor den udmærker sig: Nebular-biblioteket og ngx-admin admin dashboard-sættet er gratis at bruge, så det er et stort plus for en så sofistikeret samling af værktøjer. Godkendelses- og sikkerhedsmodulerne afspejler Akveos fokus på disse komponenter til administrationspanelet.
Nebular har også stærk understøttelse af sprog, der læser fra højre til venstre (RTL). Brugerne vil finde CSS-markup til understøttelse af RTL- (og LTR-) layouts og metoder – som getDirection() og setDirection() – til at registrere og ændre layoutretningen på køretid.
7. NG-Lightning
NG-Lightning er en interessant tilføjelse til komponentbiblioteket, da det er en implementering af Salesforce Lightning Design System (LDS) med Angular-præg. Dette system leverer HTML- og CSS-elementer – blueprints – og designretningslinjer for Salesforce-udviklere, der bruger platformens Lightning-ramme. De vigtigste elementer i LDS er afspejlet i denne open source-samling af Angular-widgets, herunder HTML og CSS.
Sådan fungerer det: NG-Lightning har afhængigheder, der adskiller det fra nogle af de andre komponentbiblioteker. Ud over at være afhængige af det officielle Angular Component Dev Kit, linker NG-Lightning-applikationer til de samme CSS-repositorier, som Salesforce LDS bruger. CSS kan downloades fra det officielle Salesforce UX-repositorium eller linkes via et CDN.
Alligevel vil den TypeScript-baserede tilgang til opbygning af visninger være velkendt for Angular-udviklere. Dette eksempel ville starte metadataene for den ovenfor viste advarselskomponent:
import { Component } from '@angular/core';
@Component({
selector: 'app-demo-alert-basic',
templateUrl: './basic.html',
})
export class DemoAlertBasic {
showTopAlert = false;
onClose(reason: string) {
console.log(`Closed by ${reason}`);
}
}Komponentskabelonen for det officielle NG-Lightning-eksempel er:
<div class="slds-notify_container">
<ngl-alert *ngIf="showTopAlert" variant="warning" iconName="warning" (close)="onClose($event); showTopAlert = false;">
<h2 class="slds-text-heading_small">
Your browser is outdated. Your Salesforce experience may be degraded.
<a href="javascript:void(0);">More Information</a>
</h2>
</ngl-alert>
</div>
<ngl-alert class="slds-theme_alert-texture" variant="offline" iconName="offline" (close)="onClose('click')">
<h2>You are in offline mode.<a href="javascript:void(0);">More Information</a></h2>
</ngl-alert>
<ngl-alert class="slds-m-top_small" variant="error">Your browser is currently not supported.</ngl-alert>
<button class="slds-m-top_medium" type="button" [disabled]="showTopAlert" nglButton (click)="showTopAlert = true">Show alert in container</button>Hvor den udmærker sig: NG-Lightnings udviklere tager webtilgængelighed alvorligt, hvilket afspejler deres forankring i Salesforce LDS. Dynamisk genererede grænseflader, som er kendetegnende for frameworks som Angular, kan ofte være en udfordring for slutbrugere med synshandicap eller bevægelseshandicap. NG-Lightning overholder W3C’s retningslinjer for ARIA-specifikationer og genererer web-markup, der er designet til at understøtte hjælpeteknologier som f.eks. skærmlæsere.
8. Syncfusion UI
Syncfusion UI er et letvægts, modulært bibliotek, der gør det muligt for udviklere kun at vælge de nødvendige komponenter til deres applikation og reducere den samlede størrelse af det endelige bundle. Dette gør det nemt at vedligeholde, udvide og opdatere biblioteket ved at tilføje nye komponenter eller ændre eksisterende komponenter uden at påvirke de andre.
Sådan fungerer det: Når en side indlæses, initialiserer og opretter Syncfusion UI-biblioteket de nødvendige komponenter på baggrund af markup og konfigurationsindstillinger. For eksempel giver gitterkomponenten brugerne mulighed for at sortere, filtrere og gruppere data, mens diagramkomponenten kan vise data i en række forskellige formater, herunder linje-, søjle- og cirkeldiagrammer.
Biblioteket indeholder også et sæt hjælpefunktioner og værktøjer, der kan bruges til at forenkle almindelige opgaver, f.eks. datamanipulation og validering. Biblioteket indeholder en datahåndtering, der kan bruges til at arbejde med komplekse datastrukturer, og en valideringsmotor, der kan bruges til at validere brugerinput.
Her udmærker det sig: Syncfusion tilbyder et robust sæt værktøjer til tilpasning og tematisering, så udviklerne hurtigt kan skabe en ensartet og professionelt udseende brugergrænseflade. Biblioteket indeholder et kraftfuldt sæt API’er og begivenheder, der kan bruges til at skabe brugerdefineret funktionalitet og interaktivitet, samt understøttelse af populære datakilder som REST API’er, OData og SignalR.
Her er et eksempel på at inkludere en Syncfusion grid-komponent i en Angular-applikation:
<ejs-grid [dataSource]="data">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
<e-column field="CustomerID" headerText="Customer Name" width="150"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
</e-columns>
</ejs-grid>Denne kode skaber et simpelt gitter, der viser data fra en datakilde. Egenskaben dataSource er indstillet til de data, der skal vises, og e-columns -elementet bruges til at definere kolonnerne i gitteret. Hvert e-column -element definerer en kolonne i gitteret, herunder det felt, der skal vises, overskriftsteksten og kolonnebredden. Eksemplet viser også, hvordan man formaterer de data, der vises i gitteret, ved hjælp af attributten format.
9. Onsen brugergrænseflade
Onsen UI er et populært open source UI-bibliotek til opbygning af hybrid- og webmobilapplikationer. Det giver en bedre sømløs integration med populære frontend-frameworks end andre biblioteker fra tredjeparter, hvilket gør det nemt at skabe interaktive brugergrænseflader af høj kvalitet med minimal indsats.
Sådan fungerer det: Onsen UI er baseret på Googles Material Design-filosofi, hvilket sikrer, at applikationens brugergrænseflade er både æstetisk tiltalende og brugervenlig. Det giver et omfattende sæt indbyggede temaer, der kan anvendes på komponenterne for at forbedre applikationens udseende og følelse.
Der, hvor den udmærker sig: Onsen UI udmærker sig ved sin brugervenlighed og evne til at skabe applikationer på tværs af platforme, der ser ud og føles som native apps. Det giver et rigt sæt af foruddesignede UI-komponenter, der er optimeret til mobile enheder og kan tilpasses til applikationens behov. Den indeholder også funktioner som FastClick-understøttelse, der hjælper med at fjerne forsinkelser i berøringshændelser, og lazy loading, der giver mulighed for hurtigere indlæsningstider for applikationen.
Her er et eksempel på et kodestykke, der viser, hvordan man opretter en simpel knap ved hjælp af Onsen UI:
<ons-button modifier="large--cta">Click me!</ons-button>Denne kode vil oprette en knap med teksten “Click me!” og modificeringsklassen large--cta, som vil ændre knappens udseende til en større størrelse med en farve, der er egnet til en call-to-action-knap.
Opsummering
Komponentbiblioteker er nu bredt accepteret som standardpraksis inden for webudvikling. Komponentbiblioteker har hjulpet Angular med at blive et af de mest populære og udbredte frontend-udviklingsframeworks ved at give en praktisk og effektiv måde at udvikle UI-komponenter på.
Ovenstående biblioteker leverer forudbyggede og tilpassede UI-komponenter, der hjælper udviklere med at skabe konsistente brugergrænseflader af høj kvalitet med mindre besvær. I sidste ende vil valget af bibliotek afhænge af projektets specifikke behov og udviklerens præferencer.
Har du brug for et hjem til dit næste Angular-projekt? Kinsta’s Applikation Hosting– og Database Hosting-platforme er løsninger, der er klar til at servere din applikation for verden.
Han er en selvlært webudvikler, skribent, skaber og en stor beundrer af Free and Open Source Software (FOSS). Udover teknologi, er han begejstret for videnskab, filosofi, fotografi, kunst, katte og mad. Lær mere om ham på hans hjemmeside, og kontakt Salman på X.
Skriv et svar