À mesure qu'une application devient plus complexe, ses besoins augmentent également. À un moment donné, la diffusion de fichiers HTML statiques peut entraver la progression ou freiner les fonctionnalités de l'application. Au lieu de cela, vous voudrez servir du contenu dynamique, une tâche que les moteurs de modèles comme Handlebars rendent possible.
Handlebars est un moteur de template minimal et sans logique pour NodeJS. C'est une extension du moteur de modèle de moustache. Comme il s'agit d'un moteur sans logique, vous pouvez l'utiliser pour séparer strictement la présentation du code sous-jacent.
Handlebars bénéficie d'un excellent support en tant que moteur de modèles à partir du framework NestJS.
Qu'est-ce qu'un moteur de template ?
Un moteur de template est un outil qui combine des balises HTML et un langage de programmation pour créer un modèle HTML avec un minimum de code.
Le moteur de modèle lors de l'exécution injecte des données dans le modèle HTML pour rendre la vue finale dans le navigateur.
Vous trouverez peut-être compliqué de mettre en place un moteur de template comme Handlebars, car cela implique de nombreuses étapes. Cependant, le framework de serveur Express que NestJS utilise par défaut a un excellent support pour les guidons.
Étape 1: Générer une application NestJS
Exécutez la commande suivante pour structurer une nouvelle application Nest :
nid nouveau <nom de votre application>
Étape 2: Installer les guidons
Exécutez la commande suivante pour installer Handlebars à l'aide de le gestionnaire de paquets npm:
npm install express-handlebars@^5.3.0@les types/express-handlebars@^5.3.0
Étape 3: Configurer l'instance express
Accédez à votre main.ts fichier et importation Application NestExpress de @nestjs/platform-express.
Attribuez NestExpressApplication en tant que type générique au créer méthode.
Ainsi:
constante application = attendre NestFactory.create(AppModule)
Transmettre NestExpressApplication au application L'objet lui donne accès aux méthodes exclusives à ExpressJS. Vous aurez besoin de ces méthodes pour configurer des propriétés spécifiques de Handlebars.
Étape 4: Configurer les guidons
Tout d'abord, vous devrez spécifier les emplacements où votre application trouvera le HTML et les autres fichiers statiques (feuilles de style, images, etc.). Vous pouvez stocker vos fichiers HTML dans un "vues", et d'autres fichiers statiques dans un dossier "Publique” dossier, respectivement.
Pour spécifier les emplacements, commencez par importer rejoindre de chemin. Puis, à l'intérieur du amorcer fonction, définissez l'emplacement des styles.
Ainsi:
app.useStaticAssets (joindre (__dirname, '..', 'Publique'))
La fonction join prend un nombre arbitraire de chaîne de caractères arguments, les joint et normalise le chemin résultant. __dirname renvoie le chemin du dossier où se trouve le main.ts fichier réside.
Ensuite, définissez l'emplacement de vos fichiers HTML, comme suit :
app.setBaseViewsDir (joindre (__dirname, '..', 'vues'));
Ensuite, importez les guidons dans votre main.ts dossier:
importer * comme hbs de 'express-guidon' ;
Vous aurez besoin du hbs import pour configurer les propriétés du guidon comme le nom de l'extension, etc.
Le nom d'extension de fichier par défaut pour les guidons est .guidon.
Ce nom d'extension est long, mais vous pouvez le configurer avec le app.engine appel. app.engine est une fonction wrapper native autour de moteur express méthode. Il prend deux arguments: poste et une fonction de rappel. Voir le Documentation express sur app.engine pour en savoir plus.
Appel app.engine(), et comme premier argument, passez la chaîne 'hbs'. Ensuite, comme deuxième argument, appelez la fonction hbs et transmettez un objet de configuration avec une propriété nom_ext mis à 'hbs'. Ce paramètre modifie le nom de l'extension de .handlebars à .hbs.
app.engine('hbs', hbs({ nom_ext: 'hbs' }));
Enfin, réglez le moteur de vue sur Handlebars comme suit :
app.setViewEngine('hbs');
Étape 5: Créer des dossiers
Dans le répertoire racine de votre projet, créez deux nouveaux dossiers. Vous utiliserez le premier, Publique, pour stocker les feuilles de style de votre application. Dans vues, vous stockerez tous vos fichiers HTML.
Ceci conclut la configuration de votre environnement de développement. Dans la section suivante, vous aurez un aperçu de la syntaxe Handlebars et de son utilisation dans une application NestJS.
La syntaxe des guidons
Cette section couvrira l'essentiel de la syntaxe du guidon dont vous avez besoin pour servir vos fichiers de manière dynamique.
Aides
Les assistants sont des fonctions qui transforment la sortie, itèrent sur les données et rendent la sortie conditionnelle.
Handlebars propose deux types d'assistants (bloc et intégré) et vous pouvez créer des assistants personnalisés en fonction de vos besoins.
Vous désignez une aide en l'enveloppant dans des accolades doubles. Préfixez son nom avec un dièse (#) pour une balise d'ouverture d'aide et une barre oblique (/) pour une balise de fermeture.
Par exemple:
{{!-- si la valeur est vrai, la div sera rendue autre, ce ne sera pas --}}
{{#si valeur}}
<div>La valeur a été rendue</div>
{{/si}}
Si vous créez un assistant personnalisé, vous devez l'enregistrer dans votre hbs objet de configuration dans votre main.ts fichier avant de pouvoir l'utiliser dans votre application.
// main.ts
importer { customHelper } de './helpers/hbs.helpers' ;
// Dans la fonction bootstrap
app.engine('hbs', hbs({ nom_ext: 'hbs', aides: { customHelper } }));
Expressions
Les expressions sont l'unité d'un modèle de guidon. Votre utilisation des expressions varie en fonction de la complexité de la tâche. Vous pouvez les utiliser seuls dans un modèle, les transmettre comme entrée dans des assistants, etc.
Dénotez les expressions avec des accolades doubles, par exemple :
<h1>{{message}}</h1>
Partiels
Un partiel fait référence à un morceau de HTML pré-enregistré car il apparaît dans plusieurs fichiers HTML. Par exemple, les barres de navigation et les pieds de page. Vous pouvez stocker ce contenu dans un seul fichier et l'inclure si nécessaire.
Comme pour vos fichiers statiques et HTML, vous devrez également définir un répertoire partiels dans votre app.engine objet de paramétrage.
Enregistrez votre répertoire partials en ajoutant le code suivant à votre objet de configuration :
// main.ts
partialsDir: jointure (__dirname, '..', 'vues/partiels'),
Vous pouvez accéder à un partiel en utilisant la syntaxe d'appel partiel. Dans les accolades doubles, entrez un symbole supérieur à (>) suivi du nom du partiel.
Par exemple:
{{> nameOfPartial}}
Dispositions
Une mise en page Handlebars est une page HTML utilisée pour définir des métadonnées sous-jacentes ou une structure générale pour d'autres pages HTML de l'application. Il agit comme un conteneur avec un espace réservé dans lequel vous pouvez injecter des données dynamiques.
Par exemple:
<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<meta http-equiv="Compatible X-UA" contenu="IE=bord">
<méta nom="fenêtre" contenu="width=device-width, initial-scale=1.0">
<Titre>Création de modèles dans NestJS avec Handlebars</title>
</head>
<corps>
<entête>
{{!-- Barre de navigation partielle --}}
{{>barre de navigation}}
</header>
<div>
{{!-- Espace réservé pour le corps --}}
{{{corps}}}
</div>
{{!-- Pied de page partiel --}}
{{>bas de page}}
</body>
</html>
Lorsque vous exécutez votre code, Handlebars prend le contenu du .hbs fichier que vous voulez rendre et les injecte dans le corps espace réservé. Ensuite, il affiche le résultat sous la forme de la page HTML finale.
Vous devrez enregistrer votre répertoire de mises en page dans votre app.engine objet de configuration et définissez un fichier de mise en page par défaut. Un fichier de mise en page par défaut est le fichier de mise en page utilisé par Handlebars si vous ne définissez pas de mise en page spécifique.
Ajoutez le code suivant à votre objet de configuration pour déclarer une mise en page par défaut et enregistrer un répertoire de mises en page :
mise en page par défaut: 'Nom du fichier de mise en page',
layoutsDir: join (__dirname, '..', 'vues/mises en page'),
Rendu d'un fichier .hbs
Dans votre fichier de contrôleur, importez le Rés décorateur de @nestjs/commun et Réponse de Express.
Ensuite, dans votre gestionnaire de route, passez un argument, résolution. Attribuez un type de réponse à res et annotez-le avec le décorateur Res. Le décorateur Res expose les méthodes de gestion des réponses natives d'Express et désactive l'approche standard NestJS.
Ensuite, appelez la méthode render sur res et transmettez le nom du fichier que vous souhaitez rendre comme premier argument. Pour le deuxième argument, passez un objet contenant le nom de la mise en page et la valeur de remplacement d'une expression.
Les guidons utiliseront la disposition par défaut définie dans votre app.engine objet de configuration si vous ne fournissez pas de mise en page.
@Obtenir()
getHello(@Rés() rés : Réponse){
return res. rendu('Nom du fichier', { disposition: 'nom de mise en page', message: 'Bonjour le monde' });
}
Alternatives aux guidons
Handlebars est un excellent outil de création de modèles avec de nombreuses fonctionnalités pratiques telles que des aides et des mises en page. Néanmoins, selon vos besoins, vous pouvez choisir une alternative telle que EJS (Embedded JavaScript), Pug ou Moustache.
