Angular är ett JavaScript-ramverk med öppen källkod. Det bygger på TypeScript och är optimerat för att utveckla webb-applikationer med en enda sida. Angular är välkänt för sin mångsidighet. Som ett resultat så kan utvecklare koncentrera sig på egenskaper och funktionalitet. Genom att lägga till komponentbibliotek till mixen så läggs det till ytterligare ett lager av effektivitet. Detta förbättrar utvecklingsproduktiviteten och den övergripande kvaliteten på dina applikationer.
Det kan dock vara svårt att välja det bästa biblioteket för ditt projekt när det finns så många tillgängliga alternativ. Den här artikeln undersöker några av de mest användbara Angular-komponentbiblioteken, hur de fungerar och hur du kan integrera vart och ett av dem i din Angular-applikation.
Varför ska man använda ett komponentbibliotek?
Oavsett om du bygger dem själv eller använder dig av bibliotek från tredje part så utgör komponenterna grunden för Angular-applikationer. Varje komponent är beroende av en mall för sina HTML- och CSS-element. De är dessutom beroende av en TypeScript-kod som styr dess beteende.
Den viktigaste fördelen med komponentbibliotek är att de tillhandahåller återanvändbara, förbyggda gränssnittskomponenter. Som ett resultat så minskar behovet av egen kod och utvecklare kan snabbt få igång sina applikationer.
Angular’s tillvägagångssätt för komponenter kan även förbättra samarbetet mellan olika team av programmerare som skriver TypeScript-kod. Det kan dessutom förenklar arbetet för webbdesigners som tillhandahåller HTML för mallarna.
Komponentbibliotek läggs vanligtvis till Angular-projekt med hjälp av Node.js npm Node Package Manager eller med hjälp av Angular’s eget kommandoradsgränssnitt (CLI).
Vad gör ett bra komponentbibliotek till ett bra bibliotek?
Komponentbiblioteken på vår lista har valts ut beroende på flera kriterier:
- De tillhandahåller en omfattande uppsättning av UI-komponenter. Som ett resultat så blir det enkelt för utvecklare att snabbt skapa vackra och funktionella applikationer.
- De är lätta att använda och integreras med populära ramverk för webbutveckling som Angular, React och Vue.
- De erbjuder en bra dokumentation och support. Utvecklare kan därför alltid få hjälp när det behövs.
- De underhålls och uppdateras aktivt, vilket säkerställer att de håller sig uppdaterade med den senaste webbtekniken och de senaste säkerhetsstandarderna.
9 smarta Angular-komponentbibliotek
Låt oss nu ta en närmare titt på våra val.
1. Angular Material
Angular Material är det officiella Angular-komponentbiblioteket. Det erbjuder en omfattande UI-samling samtidigt som det håller sig uppdaterat med de senaste Angular-funktionerna och API-ändringarna. Det erbjuder dessutom ett inbyggt stöd för tillgänglighet och genererar markup för att möjliggöra tangentbordsnavigering och vägleda hjälpmedel som skärmläsare.
Hur det fungerar: Angular Material utnyttjar Angular’s inbyggda direktiv och tjänster för att tillhandahålla en uppsättning av databundna komponenter och prestanda-komponenter ovanpå Angular. Som ett resultat så blir det enkelt att lägga till interaktivitet i webbapplikationer.
Där det utmärker sig: Angular Material utmärker sig genom att tillhandahålla förbyggda UI-komponenter som följer Material Design-riktlinjerna. Det erbjuder en uppsättning av väldesignade och anpassningsbara gränssnittskomponenter som enkelt kan integreras i Angular-applikationer. Dessa komponenter omfattar navigeringsmenyer, knappar, formulär, dialogrutor med mera.
Om du exempelvis vill lägga till en knappkomponent i din applikation så kan du helt enkelt använda direktivet mat-button och anpassa detta efter behov.
Här är ett exempel på ett kod-utdrag:
<button mat-button color="primary">Click me!</button>Den här koden genererar en knappkomponent med det primära färgschemat. Du kan anpassa knappen ytterligare genom att lägga till händelsehanterare, samt ändra texten och utseendet på ikonen.
2. NG-Bootstrap
NG-Bootstrap är ett bibliotek med öppen källkod som bygger på Bootstrap CSS. Det tillhandahåller komponenter och designmönster som många utvecklare redan är bekanta med. Som ett resultat så minskar inlärningskurvan för nya projekt, och det är därför ett pålitligt val för att bygga Angular-applikationer snabbt och effektivt.
Hur det fungerar: NG-Bootstrap utökar Bootstrap-komponenternas möjligheter genom att låta utvecklare använda dem som Angular-direktiv, med tvåvägsdatabindning och andra Angular-specifika funktioner. Som ett resultat så blir det enkelt för utvecklare att skapa responsiva, mobilvänliga webbapplikationer som fungerar sömlöst med Angular.
Där det utmärker sig: En av NG-Bootstraps främsta styrkor är dess stöd för tillgänglighetsfunktioner. Detta inkluderar exempelvis W3C’s specifikationer för Accessible Rich Internet Applications (ARIA). Dessa specifikationer gör det lättare för utvecklare att skapa applikationer som kan användas av personer med funktionshinder. NG-Bootstrap utmärker sig dessutom på området för modala dialoger. Med komponenten ng-bootstrap Modal så kan utvecklare enkelt skapa modala dialogrutor med anpassningsbara alternativ som storlek, bakgrund och tangentbordsstöd.
Här är ett exempel på hur man skapar en grundläggande modal dialogruta med 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 det här exemplet så inkluderar elementet ng-template innehållet för den modala dialogen. Detta inkluderar exempelvis sidhuvud, kropp och sidfot. Knappelementet i slutet av kod-utdraget utlöser öppnandet av modaldialogen när det klickas på. Metoden open() används för att visa den modala dialogen och tar elementet ng-template som argument.
3. Clarity
Clarity är ett bibliotek med öppen källkod som använder ett gemensamt visuellt språk för alla sina komponenter. Allt för att ge ett enhetligt och intuitivt användargränssnitt. Det är även utförligt dokumenterat, med många guider, handledningar och API-referenser. Som ett resultat så blir det enkelt att lära sig och använda.
Hur det fungerar: Clarity’s designsystem bygger på konceptet ”kort”, som används för att gruppera relaterat innehåll. Kort används för att representera enskilda delar av innehållet på ett strukturerat och organiserat sätt. Clarity tillhandahåller en mängd olika kortkomponenter som kan presentera data i olika format. Dessa kortkomponenter omfattar exempelvis sidhuvuden, sidfötter och innehållssektioner och kan enkelt anpassas med olika stilar och teman.
Korten kan dessutom kombineras med andra komponenter – exempelvis modaler, dropdowns och knappar – för att skapa mer komplexa UI-designs. Det övergripande målet med den kortbaserade designen är att tillhandahålla ett flexibelt och modulärt system för att enkelt skapa komplexa gränssnitt.
Där det utmärker sig: Clarity’s omfattande uppsättning av formulärkontroller är en klar styrka. Dessa kontroller omfattar inmatningsfält, markeringsrutor, radioknappar med mera. Clarity erbjuder även en uppsättning datavisualiseringar, exempelvis stapeldiagram, linjediagram och cirkeldiagram, för att visa data på ett tydligt och organiserat sätt.
Här är ett exempel på hur man använder Clarity’s inmatningsfälts-komponent i ett HTML-formulär:
<clr-input-container>
<label>Username</label>
<input clrInput placeholder="Enter your username">
</clr-input-container>Den här koden skapar ett inmatningsfält med en etikett och platshållartext. Direktiven clr-input-container och clrInput tillhandahålls av Clarity-biblioteket och kommer att styla inmatningsfältet i enlighet med detta.
4. Kendo UI
Kendo UI är ett kommersiellt bibliotek som är byggt med prestanda i åtanke. Därför så garanteras snabba laddningstider och en smidig användarupplevelse. Det tillhandahåller dessutom teman och stilalternativ för att förbättra utseendet och känslan i din applikation, samt omfattande dokumentation och ett dedikerat supportteam.
Hur det fungerar: Kendo UI använder tekniker som virtualisering och lat laddning för att säkerställa snabba laddningstider och en smidig användarupplevelse. Som ett resultat så blir applikationer som byggs med Kendo UI både snabba och responsiva, även när de hanterar stora datamängder. Kendo UI följer dessutom en modulär arkitektur som gör det möjligt för utvecklare att endast använda de komponenter som de behöver. Därför så minskar bibliotekets storlek och prestandan förbättras.
Där det utmärker sig: Kendo UI är särskilt lämpat för applikationer på företagsnivå som kräver en omfattande datahantering och komplexa användarinteraktioner. Dess rutnätskomponent har exempelvis stöd för funktioner som filtrering, sortering och gruppering. Som ett resultat så blir det möjligt för utvecklare att presentera stora datamängder för användarna på ett hanterbart sätt.
Här är ett kod-utdrag som visar hur man skapar ett enkelt Kendo UI-rutnät 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>Den här koden visar ett Kendo UI-rutnät i din Angular-applikation. Du kan anpassa rutnätet genom att skicka olika konfigurationsalternativ till kendo-grid-komponenten.
5. PrimeNG
PrimeNG är ett bibliotek med öppen källkod som är utformat för enkel användning och anpassning. Det inkluderar även avancerade tillgänglighetsfunktioner och stöd för internationalisering. Som ett resultat så är det ett utmärkt val för globala applikationer.
Hur det fungerar: PrimeNG-biblioteket tillhandahåller en uppsättning förbyggda UI-komponenter som utvecklare enkelt kan integrera i sina Angular-applikationer. Det använder Angular’s inbyggda direktiv och livscykelkrokar för att ge en sömlös integrering med ramverket. Det stöder även olika konfigurationsalternativ och anpassningar så att utvecklare kan anpassa komponenterna till sina specifika behov.
Där det utmärker sig: En av de viktigaste funktionerna i PrimeNG är dess stöd för internationalisering. Biblioteket stöder flera språk och tillhandahåller översättningstjänster för de flesta av sina komponenter. Detta uppnås genom användning av Angular’s lokaliseringsramverk och meddelandefiler, som enkelt kan anpassas och uppdateras.
För att använda internationalisering i PrimeNG så måste du skapa översättningsfiler för de språk som du vill stödja. Dessa filer bör innehålla översättningar för alla komponenter som du vill använda i din applikation. För att aktivera internationalisering i PrimeNG så måste du ställa in attributet translate för en komponent till true. Komponenten kommer sedan att använda översättningsfilerna för att visa texten på det språk som användaren väljer.
Här är ett exempel på hur du använder komponenten p-calendar med stöd för internationalisering i PrimeNG:
<p-calendar [(ngModel)]="date" [showIcon]="true" [readonlyInput]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" [locale]="en"></p-calendar>I det här exemplet så har komponenten p-calendar-attributet translate ställts in på true och attributet [locale] har ställts in på språkkoden för engelska (en). Detta säkerställer att kalendern visas på engelska för användare som har valt det språket.
6. Nebular
Nebular är en samling av mer än 40 Angular UI-komponenter som finns i fyra anpassningsbara teman. Biblioteket, som har skapats av webbutvecklingsföretaget Akveo, levereras dessutom med en modul för användarautentisering och en ACL-baserad säkerhetsmodul för att kontrollera en mer detaljerad åtkomst till specifika resurser. Akveo kan även hjälpa dig att komma igång med din egen applikation för administratörens instrumentpanel. Detta blir möjligt tack vare ngx-admin-kitet som byggs med Nebular-moduler.
Hur det fungerar: Nebular’s UI-strategi bygger på specifikationerna i Akveos Eva Design System, som även tillhandahåller tillgångar för team vars arbete börjar med designverktyg som Sketch eller Figma.
Designers som arbetar med Nebulars CSS kan generellt hänvisa till stylingalternativ på ett semantiskt sätt – exempelvis färgvariablerna primary, success, info, warning och danger. Men användare kan gå längre än vad Akveo har beslutat att dessa representerar genom att importera avancerade stylinganpassningar som Sass-filer.
Nebular’s komponentbibliotek innehåller layouter, kort, listor, dragspel, navigeringshjälpmedel, formulärelement, datatabeller, modaler och överlagringar samt widgets som spinnare, dataplockare och framstegsbalkar.
Metadata för en Nebular-komponent med dragspel kan se ut så här TypeScript:
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'nb-accordion-demo',
templateUrl: './accordion-demo.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccordionDemoComponent {}Och dess mall kan se ut så här:
<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>Där det utmärker sig: Nebular-biblioteket och ngx-admin-kitet för admininstrumentpanelen är kostnadsfritt att använda. Detta är ett stort plus för en så sofistikerad samling verktyg. Autentiserings- och säkerhetsmodulerna återspeglar Akveos fokus på dessa komponenter för administrationsfältet.
Nebular har dessutom ett starkt stöd för språk som läser från höger till vänster (RTL). Användarna kommer att hitta CSS-markering för att stödja RTL- (och LTR-) layouter och metoder. Detta inkluderar exempelvis getDirection() och setDirection() för att upptäcka och ändra layoutriktningen vid körning.
7. NG-Lightning
NG-Lightning är ett intressant tillägg till komponentbiblioteket. Det är nämligen en Angular-anpassad implementering av Salesforce Lightning Design System (LDS). Detta system tillhandahåller HTML- och CSS-element – blåkopior – och designriktlinjer för Salesforce-utvecklare som använder plattformens Lightning-ramverk. De viktigaste delarna av LDS återspeglas i denna samling Angular-widgetar med öppen källkod, inklusive HTML och CSS.
Hur det fungerar: NG-Lightning har beroenden som skiljer det från några av de andra komponentbiblioteken. Förutom att de är beroende av det officiella Angular Component Dev Kit, så länkar NG-Lightning-applikationer till samma CSS-arkiv som Salesforce LDS använder. CSS kan laddas ner från det officiella Salesforce UX-arkivet eller länkas via ett CDN.
Det TypeScript-baserade tillvägagångssättet för att bygga vyer kommer ändå att vara bekant för Angular-utvecklare. Det här exemplet skulle starta metadata för varningskomponenten som visas ovan:
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}`);
}
}Komponentmallen för det officiella NG Lightning-exemplet är:
<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>Där det utmärker sig: NG-Lightnings utvecklare tar webbtillgänglighet på allvar. Detta återspeglar deras grund i Salesforce LDS. Dynamiskt genererade gränssnitt som är kännetecknande för ramverk som Angular kan ofta vara en utmaning för slutanvändare med syn- eller rörelsehinder. NG-Lightning följer W3C’s riktlinjer för ARIA-specifikationer och genererar en webbutformning som är utformad för att stödja hjälpmedel som skärmläsare.
8. Syncfusion UI
Syncfusion UI är ett lättviktigt och modulärt bibliotek som gör det möjligt för utvecklare att endast välja de nödvändiga komponenterna för sin applikation och minska den totala storleken på det slutliga paketet. Som ett resultat så blir det enkelt att underhålla, utöka och uppdatera biblioteket genom att lägga till nya komponenter eller ändra befintliga komponenter utan att påverka de andra.
Hur det fungerar: När en sida laddas så initialiserar och skapar Syncfusion UI-biblioteket de nödvändiga komponenterna baserat på markeringen och konfigurationsalternativen. Med rutnätskomponenten så kan användarna exempelvis sortera, filtrera och gruppera data. Diagramkomponenten kan dessutom visa data i olika format, exempelvis i linje-, stapel- och cirkeldiagram.
Biblioteket inkluderar även en uppsättning hjälpfunktioner och verktyg som kan användas för att förenkla vanliga uppgifter, exempelvisd datamanipulering och validering. Biblioteket innehåller en datahanterare som kan användas för att arbeta med komplexa datastrukturer och en valideringsmotor som kan användas för att validera användarinmatning.
Där det utmärker sig: Syncfusion tillhandahåller en robust uppsättning av verktyg för anpassning och tematisering. Som ett resultat så blir det möjligt för utvecklare att snabbt skapa ett enhetligt och professionellt utseende på användargränssnittet. Biblioteket inkluderar en kraftfull uppsättning API: er och händelser som kan användas för att skapa anpassad funktionalitet och interaktivitet, samt stöd för populära datakällor som REST API: er, OData och SignalR.
Här är ett exempel på hur man inkluderar en Syncfusion rutnäts-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>Den här koden skapar ett enkelt rutnät som visar data från en datakälla. Egenskapen dataSource är inställd på de data som ska visas och elementet e-columns används för att definiera kolumnerna i rutnätet. Varje e-column-element definierar en kolumn i rutnätet, inklusive fältet som ska visas, rubriktexten och kolumnbredden. Exemplet visar dessutom hur man formaterar de data som visas i rutnätet med hjälp av attributet format.
9. Onsen UI
Onsen UI är ett populärt UI-bibliotek med öppen källkod för att bygga hybrid- och webb-mobilapplikationer. Det erbjuder en bättre och mer sömlös integrering med populära frontend-ramverk än andra bibliotek från tredje part. Som ett resultat så blir det enkelt att skapa högkvalitativa, interaktiva användargränssnitt med minimal ansträngning.
Hur det fungerar: Onsen UI bygger på Google’s Material Design-filosofi, vilket säkerställer att applikationens användargränssnitt är både estetiskt tilltalande och användarvänligt. Det tillhandahåller en omfattande uppsättning av inbyggda teman som kan tillämpas på komponenterna för att förbättra applikationens utseende och känsla.
Där det utmärker sig: Onsen UI utmärker sig genom sin användarvänlighet. Det har dessutom en förmåga att skapa plattformsoberoende applikationer som ser ut och känns som inhemska applikationer. Det erbjuder en rik uppsättning av fördesignade UI-komponenter som är optimerade för mobila enheter och som kan anpassas för att passa applikationens behov. Utöver detta så finns det även funktioner som FastClick-stöd, som hjälper till att ta bort fördröjningar i beröringshändelser, och lat laddning, som gör att applikationen laddas snabbare.
Här är ett exempel på ett kod-utdrag som visar hur man skapar en enkel knapp med hjälp av Onsen UI:
<ons-button modifier="large--cta">Click me!</ons-button>Den här koden skapar en knapp med texten ”Click me!” och modifieringsklassen large--cta, som ändrar knappens utseende till en större storlek med en färg som är lämplig för en CTA-knapp.
Sammanfattning
Komponentbibliotek är numera allmänt accepterade som standardpraxis inom webbutveckling. De har hjälpt Angular att bli ett av de mest populära och allmänt använda ramverken för frontend-utveckling. Detta har bland annat blivit verklighet tack vare ett bekvämt och effektivt sätt att utveckla UI-komponenter.
Biblioteken ovan erbjuder förbyggda och anpassningsbara UI-komponenter som hjälper utvecklare att skapa högkvalitativa och konsekventa användargränssnitt med mindre ansträngning. I slutändan så beror valet av bibliotek på projektets specifika behov och utvecklarens preferenser.
Behöver du ett hem för ditt nästa Angular-projekt? Kinsta’s plattformar för applikationshosting och databashosting är lösningar som är redo att servera din applikation till världen.
Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.
Lämna ett svar