Sebagai aplikasi tumbuh dalam kompleksitas, begitu juga kebutuhannya. Pada titik tertentu, menyajikan file HTML statis dapat menghambat kemajuan atau menghambat fungsionalitas aplikasi. Sebagai gantinya, Anda ingin menyajikan konten dinamis, tugas yang dimungkinkan oleh mesin templating seperti Handlebars.
Handlebars adalah mesin templating minimal tanpa logika untuk NodeJS. Ini adalah perpanjangan dari mesin template kumis. Karena ini adalah mesin tanpa logika, Anda dapat menggunakannya untuk memisahkan presentasi secara ketat dari kode yang mendasarinya.
Handlebars memiliki dukungan hebat sebagai mesin templating dari kerangka kerja NestJS.
Apa itu Mesin Templat?
Mesin templating adalah alat yang menggabungkan tag HTML dan bahasa pemrograman untuk membuat templat HTML dengan kode minimal.
Mesin template saat runtime menyuntikkan data ke dalam template HTML untuk membuat tampilan akhir di browser.
Anda mungkin merasa rumit untuk menyiapkan mesin templating seperti Handlebars, karena melibatkan banyak langkah. Namun,
kerangka kerja server Ekspres yang digunakan NestJS secara default memiliki dukungan yang sangat baik untuk Handlebars.Langkah 1: Buat Aplikasi NestJS
Jalankan perintah berikut untuk membuat perancah Aplikasi Nest baru:
sarang baru <nama aplikasi Anda>
Langkah 2: Instal Setang
Jalankan perintah berikut untuk menginstal Handlebars menggunakan manajer paket npm:
npm install express-handbars@^5.3.0@tipe/express-handlebars@^5.3.0
Langkah 3: Konfigurasikan Instans Ekspres
Navigasikan ke Anda main.ts file dan impor Aplikasi NestExpress dari @nestjs/platform-express.
Tetapkan NestExpressApplication sebagai tipe generik untuk membuat metode.
Seperti:
konstan aplikasi = menunggu NestFactory.create(Modul Aplikasi)
Meneruskan Aplikasi NestExpress ke aplikasi objek memberinya akses ke metode eksklusif ExpressJS. Anda memerlukan metode tersebut untuk mengonfigurasi properti Handlebars tertentu.
Langkah 4: Konfigurasikan Handlebars
Pertama, Anda harus menentukan lokasi di mana aplikasi Anda akan menemukan HTML dan file statis lainnya (stylesheet, gambar, dll.). Anda dapat menyimpan file HTML Anda di "dilihat”, dan file statis lainnya di “publikfolder ”, masing-masing.
Untuk menentukan lokasi, mulailah dengan mengimpor Ikuti dari jalur. Kemudian, di dalam bootstrap fungsi, atur lokasi untuk gaya.
Seperti:
app.useStaticAssets (gabung (__dirname, '..', 'publik'))
Fungsi join mengambil jumlah arbitrer dari rangkaian argumen, menggabungkannya, dan menormalkan jalur yang dihasilkan. __dirname mengembalikan jalur folder tempat main.ts file berada.
Selanjutnya, atur lokasi untuk file HTML Anda, seperti:
app.setBaseViewsDir (gabung (__dirname, '..', 'dilihat'));
Selanjutnya, impor Handlebars ke dalam. Anda main.ts mengajukan:
impor * sebagai hbs dari 'stang ekspres';
Anda akan membutuhkan hbs import untuk mengonfigurasi properti Handlebars seperti nama ekstensi, dll.
Nama ekstensi file default untuk Handlebars adalah .setang.
Nama ekstensi ini panjang, tetapi Anda dapat mengonfigurasinya dengan app.engine panggilan. app.engine adalah fungsi pembungkus asli di sekitar express.engine metode. Dibutuhkan dua argumen: ext dan fungsi panggilan balik. Lihat Dokumentasi ekspres di app.engine untuk mempelajari lebih lanjut tentangnya.
Panggilan aplikasi.mesin(), dan sebagai argumen pertama, berikan string 'hbs'. Kemudian, sebagai argumen kedua, panggil fungsi hbs dan berikan objek konfigurasi dengan properti extname mulai 'hbs'. Pengaturan ini mengubah nama ekstensi dari .handbars menjadi .hbs.
aplikasi.mesin('hbs', hbs({ namaekst: 'hbs' }));
Terakhir, atur mesin tampilan ke Handlebars seperti:
app.setViewEngine('hbs');
Langkah 5: Buat Folder
Di direktori root proyek Anda, buat dua folder baru. Anda akan menggunakan yang pertama, publik, untuk menyimpan stylesheet untuk aplikasi Anda. Di dilihat, Anda akan menyimpan semua file HTML Anda.
Ini menyimpulkan pengaturan lingkungan pengembangan Anda. Di bagian selanjutnya, Anda akan memiliki gambaran umum tentang sintaks Handlebars dan penggunaannya dalam aplikasi NestJS.
Sintaks Setang
Bagian ini akan membahas sebagian besar sintaks setang yang Anda butuhkan untuk melayani file Anda secara dinamis.
Pembantu
Helper adalah fungsi yang mengubah output, mengulangi data, dan membuat output bersyarat.
Handlebars menyediakan dua jenis helper (Block dan Built-in) dan Anda dapat membuat helper khusus sesuai dengan kebutuhan Anda.
Anda menunjukkan pembantu dengan membungkusnya dalam kurung kurawal ganda. Awali namanya dengan hash (#) untuk tag pembuka dan garis miring (/) untuk tag penutup.
Sebagai contoh:
{{!-- jika nilainya adalah BENAR, div akan dirender kalau tidak, tidak akan --}}
{{#jika nilai}}
<div>Nilai telah diberikan</div>
{{/jika}}
Jika Anda membuat pembantu khusus, Anda harus mendaftarkannya di hbs objek konfigurasi di. Anda main.ts file sebelum Anda dapat menggunakannya di aplikasi Anda.
// main.ts
impor { customHelper } dari './helpers/hbs.helpers';
// Di dalam fungsi bootstrap
aplikasi.mesin('hbs', hbs({ namaekst: 'hbs', pembantu: { customHelper } }));
Ekspresi
Ekspresi adalah unit dari template setang. Penggunaan ekspresi Anda bervariasi tergantung pada kompleksitas tugas. Anda dapat menggunakannya sendiri dalam template, meneruskannya sebagai input ke helper, dan banyak lagi.
Menunjukkan ekspresi dengan kurung kurawal ganda, misalnya:
<h1>{{pesan}}</h1>
Sebagian
Sebagian mengacu pada sepotong HTML yang telah disimpan sebelumnya karena muncul di beberapa file HTML. Misalnya, navbar dan footer. Anda dapat menyimpan konten itu dalam satu file dan memasukkannya bila perlu.
Seperti halnya file statis dan HTML, Anda juga harus menyetel direktori parsial di app.engine objek konfigurasi.
Daftarkan direktori parsial Anda dengan menambahkan kode berikut ke objek konfigurasi Anda:
// main.ts
partialDir: gabung (__dirname, '..', 'tampilan/sebagian'),
Anda dapat mengakses sebagian menggunakan sintaks panggilan sebagian. Dalam kurung kurawal ganda, masukkan simbol lebih besar dari (>) diikuti dengan nama parsial.
Sebagai contoh:
{{> namaSebagian}}
Tata letak
Tata letak Handlebars adalah halaman HTML yang digunakan untuk mengatur meta-data atau struktur umum yang mendasari untuk halaman HTML lain dalam aplikasi. Ini bertindak sebagai wadah dengan tempat penampung tempat Anda dapat memasukkan data dinamis ke dalamnya.
Sebagai contoh:
<!DOCTYPE html>
<html lang="id">
<kepala>
<rangkaian meta ="UTF-8">
<meta http-equiv="Kompatibel dengan X-UA" konten="IE = tepi">
<nama meta ="area pandang" konten="lebar=lebar perangkat, skala awal=1.0">
<judul>Membuat template di NestJS dengan Handlebars</title>
</head>
<tubuh>
<header>
{{!-- Navbar Sebagian --}}
{{>bilah navigasi}}
</header>
<div>
{{!-- Body Placeholder --}}
{{{tubuh}}}
</div>
{{!-- Footer Parsial --}}
{{>catatan kaki}}
</body>
</html>
Saat Anda menjalankan kode Anda, Handlebars mengambil konten dari .hbs file yang ingin Anda render dan masukkan ke dalam tubuh pengganti. Kemudian itu membuat hasilnya sebagai halaman HTML terakhir.
Anda harus mendaftarkan direktori tata letak Anda di app.engine objek konfigurasi dan mengatur file tata letak default. File tata letak default adalah file tata letak yang digunakan Handlebars jika Anda tidak menentukan tata letak tertentu.
Tambahkan kode berikut ke objek konfigurasi Anda untuk mendeklarasikan tata letak default dan mendaftarkan direktori tata letak:
tata letak default: 'Nama file tata letak',
layoutDir: gabung (__dirname, '..', 'tampilan/tata letak'),
Membuat File .hbs
Di file pengontrol Anda, impor file res dekorator dari @nestjs/umum dan Tanggapan dari cepat.
Kemudian di penangan rute Anda, berikan argumen, res. Tetapkan jenis Respons untuk res dan beri anotasi dengan dekorator Res. Dekorator Res mengekspos metode penanganan respons asli Express dan menonaktifkan pendekatan standar NestJS.
Selanjutnya, panggil metode render pada res dan berikan nama file yang ingin Anda render sebagai argumen pertama. Untuk argumen kedua, berikan objek yang berisi nama tata letak dan nilai pengganti untuk ekspresi.
Setang akan menggunakan tata letak default yang diatur di. Anda app.engine objek konfigurasi jika Anda tidak menyediakan tata letak.
@Mendapatkan()
dapatkanHalo(@Res() soal: Tanggapan){
kembali res.render('Nama file', { tata letak: 'nama tata letak', pesan: 'Halo Dunia' });
}
Alternatif untuk Setang
Handlebars adalah alat templating yang sangat baik dengan banyak fitur praktis seperti pembantu dan tata letak. Namun, tergantung pada kebutuhan Anda, Anda dapat memilih alternatif seperti EJS (JavaScript Tertanam), Pug, atau Kumis.
