A medida que una aplicación crece en complejidad, también lo hacen sus necesidades. En algún momento, servir archivos HTML estáticos puede dificultar el progreso o retrasar la funcionalidad de la aplicación. En su lugar, querrá ofrecer contenido dinámico, una tarea que los motores de plantillas como Handlebars hacen posible.
Handlebars es un motor de plantillas mínimo y sin lógica para NodeJS. Es una extensión del motor de plantillas de bigotes. Como es un motor sin lógica, puede usarlo para separar estrictamente la presentación del código subyacente.
Handlebars tiene un gran soporte como motor de plantillas del marco NestJS.
¿Qué es un motor de plantillas?
Un motor de plantillas es una herramienta que combina etiquetas HTML y un lenguaje de programación para crear una plantilla HTML con un código mínimo.
El motor de plantillas en tiempo de ejecución inyecta datos en la plantilla HTML para representar la vista final en el navegador.
Puede que le resulte complicado configurar un motor de plantillas como Handlebars, ya que implica muchos pasos. Sin embargo,
el marco del servidor Express que NestJS usa por defecto tiene un excelente soporte para Handlebars.Paso 1: generar una aplicación NestJS
Ejecute el siguiente comando para montar una nueva aplicación Nest:
nido nuevo <nombre de tu aplicación>
Paso 2: Instale los manubrios
Ejecute el siguiente comando para instalar Handlebars usando el administrador de paquetes npm:
npm install express-handlebars@^5.3.0@tipos/express-handlebars@^5.3.0
Paso 3: configurar la instancia Express
Navega a tu principal.ts archivar e importar Aplicación NestExpress de @nestjs/plataforma-express.
Asigne NestExpressApplication como un tipo genérico al crear método.
Al igual que:
constante aplicación = esperar NestFactory.create(Módulo de aplicación)
Pasar NestExpressApplication a la aplicación El objeto le da acceso a los métodos exclusivos de ExpressJS. Necesitará esos métodos para configurar propiedades específicas de Handlebars.
Paso 4: configurar los manillares
Primero, deberá especificar las ubicaciones donde su aplicación encontrará el HTML y otros archivos estáticos (hojas de estilo, imágenes, etc.). Puede almacenar sus archivos HTML en un "puntos de vista” carpeta y otros archivos estáticos en un “público” carpeta, respectivamente.
Para especificar las ubicaciones, comience importando unirse de sendero. Entonces, dentro de la oreja función, establezca la ubicación de los estilos.
Al igual que:
app.useStaticAssets (únase (__dirname, '..', 'público'))
La función de unión toma un número arbitrario de cuerda argumentos, los une y normaliza la ruta resultante. __dirname devuelve la ruta de la carpeta donde se encuentra el principal.ts reside el archivo.
A continuación, establezca la ubicación de sus archivos HTML, así:
app.setBaseViewsDir (unirse (__dirname, '..', 'puntos de vista'));
A continuación, importe manillares a su principal.ts expediente:
importar * como hbs de 'express-manillar';
Necesitarás el hbs import para configurar las propiedades de Handlebars como el nombre de la extensión, etc.
El nombre de extensión de archivo predeterminado para manubrios es .bigote daliniano.
Este nombre de extensión es largo, pero puede configurarlo con el app.engine llamar. app.engine es una función contenedora nativa alrededor del expreso.motor método. Se necesitan dos argumentos: extensión y una función de devolución de llamada. Ver el Documentación expresa sobre app.engine para aprender más al respecto.
Llamar aplicación.motor(), y como primer argumento, pase la cadena 'hbs'. Luego, como segundo argumento, llame a la función hbs y pase un objeto de configuración con una propiedad extname ajustado a 'hb'. Esta configuración cambia el nombre de la extensión de .handlebars a .hbs.
aplicación.motor('hbs', hbs({extname: 'hbs' }));
Finalmente, configure el motor de visualización en Manillar de esta manera:
aplicación.setViewEngine('hbs');
Paso 5: crear carpetas
En el directorio raíz de su proyecto, cree dos nuevas carpetas. Usarás el primero, público, para almacenar las hojas de estilo para su aplicación. En puntos de vista, almacenará todos sus archivos HTML.
Esto concluye la configuración de su entorno de desarrollo. En la siguiente sección, tendrá una descripción general de la sintaxis de Handlebars y su uso en una aplicación NestJS.
La sintaxis de los manillares
Esta sección cubrirá la mayor parte de la sintaxis de handlebars que necesita para servir sus archivos dinámicamente.
ayudantes
Los ayudantes son funciones que transforman la salida, iteran sobre los datos y representan la salida condicional.
Handlebars proporciona dos tipos de ayudantes (de bloque e integrados) y puede crear ayudantes personalizados para satisfacer sus necesidades.
Denota un ayudante envolviéndolo entre llaves dobles. Prefije su nombre con un hash (#) para una etiqueta auxiliar de apertura y una barra diagonal (/) para una etiqueta de cierre.
Por ejemplo:
{{!-- si el valor es verdadero, el div se representará más, no lo hará --}}
{{#si valor}}
<división>El valor ha sido rendido</div>
{{/si}}
Si crea un ayudante personalizado, debe registrarlo en su hbs objeto de configuración en su principal.ts antes de que pueda usarlo en su aplicación.
// principal.ts
importar { ayudante personalizado } de './ayudantes/hbs.ayudantes';
// Dentro de la función de arranque
aplicación.motor('hbs', hbs({extname: 'hbs', ayudantes: { customHelper } }));
Expresiones
Las expresiones son la unidad de una plantilla de manillares. Su uso de expresiones varía dependiendo de la complejidad de la tarea. Puede usarlos solos en una plantilla, pasarlos como entrada a ayudantes y más.
Denote expresiones con llaves dobles, por ejemplo:
<h1>{{mensaje}}</h1>
parciales
Un parcial se refiere a una pieza de HTML previamente guardada porque aparece en varios archivos HTML. Por ejemplo, barras de navegación y pies de página. Puede almacenar ese contenido en un archivo e incluirlo cuando sea necesario.
Al igual que con sus archivos estáticos y HTML, también tendrá que establecer un directorio de parciales en su app.engine objeto de configuración.
Registre su directorio de parciales agregando el siguiente código a su objeto de configuración:
// principal.ts
dir_parciales: unir (__dirname, '..', 'vistas/parciales'),
Puede acceder a un parcial utilizando la sintaxis de llamada parcial. Entre llaves dobles, ingrese un símbolo de mayor que (>) seguido del nombre del parcial.
Por ejemplo:
{{> nombreDeParcial}}
Diseños
Un diseño de Handlebars es una página HTML que se utiliza para establecer metadatos subyacentes o una estructura general para otras páginas HTML en la aplicación. Actúa como un contenedor con un marcador de posición en el que puede inyectar datos dinámicos.
Por ejemplo:
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="UTF-8">
<meta http-equiv="Compatible con X-UA" contenido="IE = borde">
<meta nombre ="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1.0">
<título>Plantillas en NestJS con manubrios</title>
</head>
<cuerpo>
<encabezamiento>
{{!-- Barra de navegación parcial --}}
{{>barra de navegación}}
</header>
<división>
{{!-- Marcador de posición del cuerpo --}}
{{{cuerpo}}}
</div>
{{!-- Pie de página parcial --}}
{{>pie de página}}
</body>
</html>
Cuando ejecuta su código, Handlebars toma el contenido del .hbs archivo que desea renderizar y los inyecta en el cuerpo marcador de posición Luego presenta el resultado como la página HTML final.
Deberá registrar su directorio de diseños en su app.engine objeto de configuración y establezca un archivo de diseño predeterminado. Un archivo de diseño predeterminado es el archivo de diseño que utiliza Handlebars si no define un diseño específico.
Agregue el siguiente código a su objeto de configuración para declarar un diseño predeterminado y registrar un directorio de diseños:
diseño predeterminado: 'Nombre del archivo de diseño',
layoutsDir: unir (__dirname, '..', 'vistas/diseños'),
Representación de un archivo .hbs
En su archivo de controlador, importe el res decorador de @nestjs/común y Respuesta de Rápido.
Luego, en su controlador de ruta, pase un argumento, resolución. Asigne un tipo de Respuesta a res y anótelo con el decorador Res. El decorador Res expone los métodos de manejo de respuestas nativas de Express y deshabilita el enfoque estándar de NestJS.
A continuación, llame al método render en res y pase el nombre del archivo que desea renderizar como primer argumento. Para el segundo argumento, pase un objeto que contenga el nombre del diseño y el valor de sustitución de una expresión.
Los manillares utilizarán el diseño predeterminado establecido en su app.engine objeto de configuración si no proporciona un diseño.
@Obtener()
obtenerHola(@Res() resolución: Respuesta){
volver res.render('Nombre del archivo', { diseño: 'nombre del diseño', mensaje: 'Hola Mundo' });
}
Alternativas a los manillares
Handlebars es una excelente herramienta de creación de plantillas con muchas funciones útiles, como asistentes y diseños. Aún así, según sus necesidades, puede elegir una alternativa como EJS (JavaScript integrado), Pug o Moustache.