När en applikation växer i komplexitet, ökar dess behov också. Vid någon tidpunkt kan visning av statiska HTML-filer hindra framsteg eller hålla tillbaka appens funktionalitet. Istället vill du servera dynamiskt innehåll, en uppgift som mallmotorer som styret möjliggör.

Styre är en minimal, logiklös mallmotor för NodeJS. Det är en förlängning av mustaschmallmotorn. Eftersom det är en logiklös motor kan du använda den för att strikt separera presentation från underliggande kod.

Handlebars har bra stöd som mallmotor från NestJS-ramverket.

Vad är en mallmotor?

En mallmotor är ett verktyg som kombinerar HTML-taggar och ett programmeringsspråk för att skapa en HTML-mall med minimal kod.

Mallmotorn vid körning injicerar data i HTML-mallen för att återge den slutliga vyn i webbläsaren.

Du kanske tycker att det är komplicerat att sätta upp en mallmotor som styret, eftersom det innefattar många steg. I alla fall, Express-serverramverket som NestJS använder som standard har utmärkt stöd för styren.

Steg 1: Skapa en NestJS-applikation

Kör följande kommando för att bygga en ny Nest-applikation:

bo nytt <namnet på din app>

Steg 2: Installera styren

Kör följande kommando för att installera Handlebars med npm-pakethanteraren:

npm installera express-styre@^5.3.0@typer/express-handlebars@^5.3.0

Steg 3: Konfigurera Express Instance

Navigera till din main.ts fil och import NestExpressApplication från @nestjs/platform-express.

Tilldela NestExpressApplication som en generisk typ till skapa metod.

Såhär:

konst app = vänta NestFactory.create(AppModule)

Skickar NestExpressApplication till app objekt ger det tillgång till ExpressJS-exklusiva metoder. Du behöver dessa metoder för att konfigurera specifika styregenskaper.

Steg 4: Konfigurera styret

Först måste du ange var din applikation kommer att hitta HTML-filer och andra statiska filer (stilmallar, bilder, etc.). Du kan lagra dina HTML-filer i en "vyer"-mappen och andra statiska filer i en "offentlig” mapp, respektive.

För att ange platserna, börja med att importera Ansluta sig från väg. Sedan, inuti bootstrap funktionen, ställ in platsen för stilarna.

Såhär:

app.useStaticAssets (join (__dirname, '..', 'offentlig'))

Join-funktionen tar ett godtyckligt antal sträng argument, sammanfogar dem och normaliserar den resulterande vägen. __dirnamn returnerar sökvägen till mappen där main.ts filen finns.

Ställ sedan in platsen för dina HTML-filer, så här:

app.setBaseViewsDir (join (__dirname, '..', 'vyer'));

Importera sedan styren till din main.ts fil:

importera * som hbs från 'express-styre';

Du behöver hbs import för att konfigurera styregenskaper som tilläggsnamnet etc.

Standardnamnet för filtillägg för Handlebars är .styre.

Detta tilläggsnamn är långt, men du kan konfigurera det med app.motor ringa upp. app.motor är en inbyggd omslagsfunktion runt express.motor metod. Det krävs två argument: ext och en återuppringningsfunktion. Se den Express dokumentation på app.motor för att lära dig mer om det.

Ringa upp app.engine(), och som ett första argument, skicka strängen 'hbs'. Anropa sedan hbs-funktionen som ett andra argument och skicka in ett konfigurationsobjekt med en egenskap extname satt till "hbs". Den här inställningen ändrar tilläggsnamnet från .handlebars till .hbs.

app.motor('hbs', hbs({ extname: 'hbs' }));

Slutligen, ställ in visningsmotorn till Styre så här:

app.setViewEngine('hbs');

Steg 5: Skapa mappar

Skapa två nya mappar i ditt projekts rotkatalog. Du använder den första, offentlig, för att lagra stilmallarna för din applikation. I vyer, kommer du att lagra alla dina HTML-filer.

Detta avslutar installationen av din utvecklingsmiljö. I nästa avsnitt kommer du att få en översikt över styrsyntaxen och dess användning i en NestJS-applikation.

Styrets syntax

Det här avsnittet kommer att täcka huvuddelen av styrets syntax som du behöver för att visa dina filer dynamiskt.

Hjälpare

Hjälpare är funktioner som transformerar utdata, itererar över data och gör villkorlig utdata.

Handlebars tillhandahåller två typer av hjälpare (block och inbyggd) och du kan skapa anpassade hjälpare för att passa dina behov.

Du betecknar en hjälpare genom att linda in den i dubbla lockiga hängslen. Prefix dess namn med en hash (#) för en inledande hjälptagg och ett snedstreck (/) för en avslutande tagg.

Till exempel:

{{!-- om värdet är Sann, div kommer att renderas annan, det kommer inte --}}
{{#om värde}}
<div>Värdet har återgetts</div>
{{/om}}

Om du skapar en anpassad hjälpare måste du registrera den i din hbs konfigurationsobjekt i din main.ts fil innan du kan använda den i din applikation.

// main.ts
importera { customHelper } från './helpers/hbs.helpers';
// Inuti bootstrap-funktionen
app.motor('hbs', hbs({ extname: 'hbs', hjälpare: { customHelper } }));

Uttryck

Uttryck är enheten för en styremall. Din användning av uttryck varierar beroende på uppgiftens komplexitet. Du kan använda dem ensamma i en mall, skicka dem som en input till hjälpare och mer.

Beteckna uttryck med dubbla hängslen, till exempel:

<h1>{{meddelande}}</h1>

Partier

En partiell hänvisar till en HTML-bit som sparats i förväg eftersom den visas i flera HTML-filer. Till exempel navigeringsfält och sidfötter. Du kan lagra innehållet i en fil och inkludera det vid behov.

Som med dina statiska filer och HTML-filer måste du också ställa in en delkatalog i din app.motor konfigurationsobjekt.

Registrera din delkatalog genom att lägga till följande kod till ditt konfigurationsobjekt:

// main.ts
partialsDir: join (__dirname, '..', 'vyer/partier'),

Du kan komma åt en partiell med hjälp av syntaxen för partiell anrop. I dubbla klammerparenteser anger du en större än-symbol (>) följt av namnet på partialen.

Till exempel:

{{> nameOfPartial}}

Layouter

En Handlebars-layout är en HTML-sida som används för att ställa in underliggande metadata eller allmän struktur för andra HTML-sidor i applikationen. Den fungerar som en behållare med en platshållare som du kan injicera dynamisk data i.

Till exempel:

<!DOCTYPE html>
<html lang="sv">
<huvud>
<meta teckenuppsättning="UTF-8">
<meta http-equiv="X-UA-kompatibel" innehåll="IE=kant">
<metanamn="utsiktsplats" innehåll="bredd=enhetsbredd, initialskala=1,0">
<titel>Mallar i NestJS med styre</title>
</head>
<kropp>
<rubrik>
 {{!-- Navbar partiell --}}
 {{>navigeringsfält}}
</header>
<div>
 {{!-- Body Placeholder --}}
 {{{kropp}}}
</div>
 {{!-- Sidfot partiell --}}
 {{>sidfot}}
</body>
</html>

När du kör din kod tar Handlebars innehållet i .hbs fil du vill rendera och injicerar dem i kropp Platshållare. Sedan renderar den resultatet som den sista HTML-sidan.

Du måste registrera din layoutkatalog i din app.motor konfigurationsobjekt och ange en standardlayoutfil. En standardlayoutfil är layoutfilen som Handlebars använder om du inte definierar en specifik layout.

Lägg till följande kod till ditt konfigurationsobjekt för att deklarera en standardlayout och registrera en layoutkatalog:

standardlayout: 'Namn på layoutfilen',
layoutsDir: join (__dirname, '..', 'vyer/layouter'),

Rendera en .hbs-fil

Importera filen i din styrenhetsfil Res dekoratör från @nestjs/common och Svar från uttrycka.

Skicka sedan ett argument i din rutthanterare, res. Tilldela en typ av Svar till res och kommentera den med Res-dekoratören. Res-dekoratören avslöjar Express inbyggda svarshanteringsmetoder och inaktiverar NestJS-standardmetoden.

Anropa sedan rendermetoden på res och skicka namnet på filen du vill rendera som det första argumentet. För det andra argumentet skickar du ett objekt som innehåller namnet på layouten och ersättningsvärdet för ett uttryck.

Styren kommer att använda standardlayouten i din app.motor konfigurationsobjekt om du inte tillhandahåller en layout.

@Skaffa sig()
få Hej(@Res() res: Svar){
 return res.render('Namn på fil', { layout: 'layoutens namn', meddelande: 'Hej världen' });
 }

Alternativ till styre

Styre är ett utmärkt mallverktyg med många praktiska funktioner som hjälpare och layouter. Fortfarande, beroende på dina behov, kan du välja ett alternativ som EJS (Embedded JavaScript), Pug eller Mustache.