Sovelluksen monimutkaisuuden kasvaessa sen tarpeet kasvavat. Jossain vaiheessa staattisten HTML-tiedostojen näyttäminen voi haitata edistymistä tai estää sovelluksen toimivuuden. Sen sijaan haluat tarjota dynaamista sisältöä, minkä mahdollistavat ohjaustangon kaltaiset mallimoottorit.
Ohjaustangot on minimaalinen, logiikkavapaa mallimoottori NodeJS: lle. Se on viiksimallimoottorin jatke. Koska se on logiikkaton moottori, voit käyttää sitä erottamaan esityksen tiukasti taustalla olevasta koodista.
Ohjaustangolla on suuri tuki NestJS-kehyksen mallimoottorina.
Mikä on mallinnusmoottori?
Mallimoottori on työkalu, joka yhdistää HTML-tunnisteet ja ohjelmointikielen luodakseen HTML-mallin, jossa on vain vähän koodia.
Mallimoottori ajon aikana lisää tietoja HTML-malliin, jotta se näyttää lopullisen näkymän selaimessa.
Ohjaustangojen kaltaisen mallimoottorin asentaminen saattaa olla monimutkaista, koska se sisältää monia vaiheita. Kuitenkin, Express-palvelinkehys jota NestJS käyttää oletuksena, tukee erinomaisesti ohjaustankoja.
Vaihe 1: Luo NestJS-sovellus
Suorita seuraava komento rakentaaksesi uusi Nest-sovellus:
pesä uusi <sovelluksesi nimi>
Vaihe 2: Asenna ohjaustangot
Suorita seuraava komento asentaaksesi ohjaustangot käyttämällä npm-pakettien hallinta:
npm install express-handlebars@^5.3.0@tyypit/express-handlebars@^5.3.0
Vaihe 3: Määritä Express Instance
Navigoi omaan main.ts tiedosto ja tuonti NestExpress-sovellus alkaen @nestjs/platform-express.
Määritä NestExpressApplication yleiseksi tyypiksi sovellukselle luoda menetelmä.
Niin kuin:
konst sovellus = odottaa NestFactory.create(AppModule)
NestExpressApplication välitetään sovellus Objekti antaa sille pääsyn ExpressJS: n yksinomaisiin menetelmiin. Tarvitset näitä menetelmiä tiettyjen ohjaustankojen ominaisuuksien määrittämiseen.
Vaihe 4: Määritä ohjaustangot
Ensin sinun on määritettävä paikat, joista sovelluksesi löytää HTML- ja muut staattiset tiedostot (tyylitaulukot, kuvat jne.). Voit tallentaa HTML-tiedostosi "näkymät" -kansio ja muut staattiset tiedostot "julkinen”-kansioon.
Määritä sijainnit aloittamalla tuomalla liittyä seuraan alkaen polku. Sitten sisällä bootstrap toiminto, aseta tyylien sijainti.
Niin kuin:
app.useStaticAssets (join (__dirname, '..', 'julkinen'))
Join-funktio ottaa mielivaltaisen määrän merkkijono argumentit, yhdistää ne ja normalisoi tuloksena olevan polun. __dirname palauttaa sen kansion polun, jossa main.ts tiedosto sijaitsee.
Aseta seuraavaksi HTML-tiedostojesi sijainti seuraavasti:
app.setBaseViewsDir (join (__dirname, '..', 'näkymät'));
Tuo seuraavaksi ohjaustangot omaan main.ts tiedosto:
tuonti * kuten hbs alkaen "pikaohjaustangot";
Tarvitset hbs tuonti määrittääksesi ohjaustangon ominaisuudet, kuten laajennuksen nimen jne.
Ohjaustangojen oletustiedostotunnisteen nimi on .ohjaustanko.
Tämä laajennuksen nimi on pitkä, mutta voit määrittää sen app.engine soittaa puhelimella. app.engine on natiivi kääretoiminto ympärillä express.moottori menetelmä. Se vaatii kaksi argumenttia: alanumero ja takaisinsoittotoiminto. Katso Pikadokumentaatio päällä app.engine saadaksesi lisätietoja siitä.
Soittaa puhelimella app.engine(), ja välitä ensimmäisenä argumenttina merkkijono "hbs". Kutsu sitten toisena argumenttina hbs-funktio ja välitä konfiguraatioobjekti ominaisuudella ulkonimi asetettu "hbs". Tämä asetus muuttaa laajennuksen nimen .handlebars: sta muotoon .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Aseta lopuksi näkymämoottori ohjaustankoon seuraavasti:
app.setViewEngine('hbs');
Vaihe 5: Luo kansioita
Luo kaksi uutta kansiota projektisi juurihakemistoon. Käytät ensimmäistä, julkinen, tallentaaksesi sovelluksesi tyylisivut. Sisään näkymät, tallennat kaikki HTML-tiedostosi.
Tämä päättää kehitysympäristösi luomisen. Seuraavassa osiossa saat yleiskatsauksen Handlebars-syntaksista ja sen käytöstä NestJS-sovelluksessa.
Ohjaustangon syntaksi
Tämä osio kattaa suurimman osan ohjaustangon syntaksista, jota tarvitset tiedostojesi dynaamiseen palvelemiseen.
Auttajat
Apuohjelmat ovat toimintoja, jotka muuttavat tulostetta, iteroivat dataa ja renderöivät ehdollisen tulosteen.
Ohjaustanko tarjoaa kahdentyyppisiä apuvälineitä (Block ja Built-in), ja voit luoda mukautettuja apureita tarpeidesi mukaan.
Merkitset auttajaa käärimällä sen kaksinkertaisiin kiharaisiin aaltosulkeisiin. Lisää sen nimen eteen tiiviste (#) avaavaa aputunnistetta varten ja vinoviiva (/) sulkevaa tagia varten.
Esimerkiksi:
{{!-- jos arvo on totta, div hahmonnetaan muu, se ei tapahdu --}}
{{#if arvo}}
<div>Arvo on renderöity</div>
{{/jos}}
Jos luot mukautetun avustajan, sinun on rekisteröitävä se omaan hbs konfigurointiobjektissasi main.ts tiedostoa ennen kuin voit käyttää sitä sovelluksessasi.
// main.ts
tuonti { customHelper } alkaen './helpers/hbs.helpers';
// Bootstrap-funktion sisällä
app.engine('hbs', hbs({ extname: 'hbs', avustajat: { customHelper } }));
Ilmaisut
Lausekkeet ovat ohjaustangon mallin yksikkö. Ilmaisujen käyttösi vaihtelee tehtävän monimutkaisuuden mukaan. Voit käyttää niitä yksinään mallissa, välittää ne syötteenä avustajille ja paljon muuta.
Merkitse ilmaisuja kaksoishakasulkeilla, esimerkiksi:
<h1>{{viesti}}</h1>
Osittainen
Osittainen viittaa esitallennettuun HTML-osaan, koska se esiintyy useissa HTML-tiedostoissa. Esimerkiksi navigointipalkit ja alatunnisteet. Voit tallentaa sisällön yhteen tiedostoon ja sisällyttää sen tarvittaessa.
Kuten staattisissa ja HTML-tiedostoissasi, sinun on myös asetettava osittainen hakemisto app.engine konfigurointiobjekti.
Rekisteröi osahakemistosi lisäämällä seuraava koodi konfigurointiobjektiisi:
// main.ts
partialsDir: liity (__dirname, '..', 'näkymät/osat'),
Voit käyttää osittaista puhelun syntaksia. Syötä kaksoishakasulkeisiin suurempi kuin -symboli (>) ja sen jälkeen osion nimi.
Esimerkiksi:
{{> nameOfPartial}}
Asettelut
Ohjaustangojen asettelu on HTML-sivu, jolla määritetään taustalla olevat metatiedot tai yleinen rakenne sovelluksen muille HTML-sivuille. Se toimii säiliönä, jossa on paikkamerkki, johon voit syöttää dynaamisia tietoja.
Esimerkiksi:
<!DOCTYPE html>
<html lang="fi">
<pää>
<meta charset="UTF-8">
<meta http-equiv="X-UA-yhteensopiva" sisältö="IE = reuna">
<metanimi="näkymä" sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<otsikko>Malli NestJS: ssä ohjaustangolla</title>
</head>
<kehon>
<otsikko>
{{!-- Navbar Osittainen --}}
{{>navigointipalkki}}
</header>
<div>
{{!-- Tekstin paikkamerkki --}}
{{{body}}}
</div>
{{!-- Alatunniste osittainen --}}
{{>alatunniste}}
</body>
</html>
Kun suoritat koodin, ohjauspalkit ottaa koodin sisällön .hbs tiedosto, jonka haluat hahmontaa, ja lisää ne tiedostoon kehon paikanpitäjä. Sitten se tekee tuloksesta lopullisen HTML-sivun.
Sinun on rekisteröitävä asetteluhakemistosi app.engine konfigurointiobjekti ja aseta oletusasettelutiedosto. Oletusasettelutiedosto on asettelutiedosto, jota Handlebars käyttää, jos et määritä tiettyä asettelua.
Lisää seuraava koodi määritysobjektiin määrittääksesi oletusasettelun ja rekisteröidäksesi asetteluhakemiston:
oletusasettelu: 'Asettelutiedoston nimi',
layoutsDir: liity (__dirname, '..', 'näkymät/asettelut'),
Renderöidään .hbs-tiedosto
Tuo ohjaintiedostossasi Res sisustaja alkaen @nestjs/common ja Vastaus alkaen ilmaista.
Anna sitten reitinkäsittelijässä argumentti, res. Määritä vastaustyyppi res: lle ja merkitse se Res-sisustimella. Res-decorator paljastaa Expressin alkuperäiset vastausten käsittelymenetelmät ja poistaa NestJS: n vakiolähestymistavan käytöstä.
Kutsu seuraavaksi renderöintimenetelmä res: ssä ja anna hahmonnettavan tiedoston nimi ensimmäisenä argumenttina. Anna toiselle argumentille objekti, joka sisältää asettelun nimen ja lausekkeen korvaavan arvon.
Ohjaimet käyttävät oletusasettelua, joka on asetettu sinun app.engine konfigurointiobjekti, jos et anna asettelua.
@Saada()
saa hei(@Res() res: Vastaus){
return res.render('Tiedoston nimi', { ulkoasu: 'asettelun nimi', viesti: 'Hei maailma' });
}
Vaihtoehtoja ohjaustankoille
Ohjaustangot on erinomainen mallityökalu, jossa on monia käteviä ominaisuuksia, kuten apureita ja ulkoasuja. Silti, tarpeidesi mukaan, voit valita vaihtoehdon, kuten EJS (Embedded JavaScript), Mopsi tai Viikset.
