One place for hosting & domains

      Cómo usar EJS para crear una plantilla de su aplicación Node


      Introducción

      Cuando se crean aplicaciones Node rápidas en el momento, a veces es necesario una forma fácil y rápida de crear plantillas de nuestra aplicación.

      Jade llega como el motor de visualización para Express por defecto, pero la sintaxis de Jade puede ser demasiado compleja para muchos casos de uso. EJS es una alternativa que hace bien el trabajo y es fácil de configurar. Veamos cómo podemos crear una aplicación sencilla y usar EJS para incluir las partes repetibles de nuestro sitio (parciales) y pasar los datos a nuestras vistas.

      Configurar la aplicación demo

      Crearemos dos páginas para nuestra aplicación: una página con ancho completo y la otra con una barra lateral.

      Obtenga el código: puede encontrar un repositorio de git del código de demostración completo en GitHub aquí.

      Estructura del archivo

      Aquí están todos los archivos que necesitaremos para nuestra aplicación. Crearemos nuestra plantilla dentro de la carpeta de vistas y el resto son prácticas de Node bastante estándares.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json albergará la información de nuestra aplicación de Node y las dependencias que necesitamos (express y EJS). server.jso albergará los ajustes de nuestro servidor Express, configuración. Definiremos nuestras rutas para nuestras páginas aquí.

      Configuración de Node

      Vamos a entrar en nuestro archivo package.json y configurar nuestro proyecto ahí.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Todo lo que necesitaremos es Express y EJS. Ahora tenemos que instalar las dependencias que acabamos de definir. Ejecute:

      Con todas nuestras dependencias instaladas, ahora configuraremos nuestra aplicación para que utilice EJS y fijaremos nuestras rutas para las dos páginas que necesitamos: la página “Índice” (ancho completo) y la página “Acerca de” (barra lateral). Haremos todo esto dentro de nuestro archivo server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Aquí definimos nuestra aplicación y la configuramos para que se muestre en el puerto 8080. También debemos configurar EJS como el motor de visualización de nuestra aplicación Express usando app.set('view engine', 'ejs');. Observe cómo enviamos una vista al usuario usando res.render(). Es importante tener en cuenta que res.render() buscará en una carpeta de vistas la vista. Solo tenemos que definir pages/index, ya que la ruta completa es views/pages/index.

      Iniciar nuestro servidor

      Inicie el servidor usando:

      Ahora podemos ver nuestra aplicación en el navegador en http://localhost:8080 y http://localhost:8080/about. Nuestra aplicación está configurada y tenemos que definir nuestros archivos de vista y ver cómo EJS funciona ahí.

      Cree los parciales de EJS

      Igual que muchas aplicaciones que creamos, hay mucho código que se reutiliza. A esos códigos los llamamos parciales y definen tres archivos que usaremos en todo nuestro sitio: head.ejs, header.ejs y footer.ejs. Vamos a crear esos archivos ahora.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Añada los parciales de EJS a Vistas

      Ahora tenemos nuestros parciales definidos. Lo único que debemos hacer es incluirlos en nuestras vistas. Ahora veremos index.ejs y about.ejs y usaremos la sintaxis include para añadir los parciales.

      Sintaxis para incluir un parcial de EJS

      Utilice <%- include('RELATIVE/PATH/TO/FILE') %> para integrar un parcial de EJS en otro archivo.

      • El guion <%- en vez de solo <% para indicar a EJS que renderice HTML sin formato.
      • La ruta al parcial es relativa al archivo actual.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Ahora podemos ver nuestra vista definida en el navegador en http://localhost:8080. node-ejs-templating-index

      Para la página de acerca de, también añadimos una barra lateral de bootstrap para demostrar cómo pueden estructurarse los parciales para que se reutilicen en diferentes plantillas y páginas.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Si visitamos http://localhost:8080/about, podemos ver nuestra página de acerca de con una barra lateral node-ejs-templating-about

      Ahora podemos empezar a usar EJS para pasar datos desde nuestra aplicación Node a nuestras vistas.

      Pasar datos a Vistas y Parciales

      Vamos a definir algunas variables básicas y una lista para pasar a nuestra página de inicio. Vuelva a su archivo server.js y añada lo siguiente dentro de su ruta app.get("https://www.digitalocean.com/")

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Hemos creado una lista llamada mascots y una cadena sencilla llamada tagline. Vamos a entrar en nuestro archivo index.ejs para usarlas.

      Renderizar una variable única en EJS

      Para hacer eco de una variable, acabamos de usar <%= tagline %>. Vamos a añadir esto a nuestro archivo index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Hacer bucle sobre los datos en EJS

      Para hacer bucle sobre nuestros datos usaremos .forEach. Vamos a añadir esto a nuestro archivo:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Ahora podemos ver en nuestro navegador la nueva información que hemos añadido.

      node-ejs-templating-rendered

      Pasar datos a un parcial en EJS

      El parcial EJS tiene acceso a todos los mismos datos que la vista principal. Pero tenga cuidado: si hace referencia a una variable en un parcial, debe definirse en cada vista que utilice el parcial o arrojará un error.

      También puede definir y pasar variables a un parcial EJS en la sintaxis include, de esta forma:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Pero de nuevo, debe tener cuidado y no asumir que una variable ha sido definida.

      Si desea referenciar una variable en un parcial que puede no definirse siempre, y darle un valor predeterminado, puede hacerlo de esta forma:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      En la línea anterior, el código EJS se renderiza el valor de variant, si está definido, y de default si no lo está.

      Conclusión

      EJS nos permite generar aplicaciones rápidas cuando no necesitamos algo demasiado complejo. Al usar parciales y tener la capacidad de pasar variables fácilmente a nuestras vistas, podemos crear algunas aplicaciones geniales rápidamente.

      Para obtener más información sobre EJS, consulte los documentos oficiales aquí.



      Source link

      Comment mettre en place un projet Node avec Typescript


      Introduction

      Node est un environnement d’exécution qui permet d’écrire du Javascript côté serveur. Il a été largement adopté depuis sa publication en 2011.  L’écriture du JavaScript côté serveur peut être difficile car la base de code se développe en raison de la nature du langage JavaScript ; dynamique et faiblement dactylographié.

      Les développeurs qui utilisent JavaScript à partir d’autres langues se plaignent souvent de l’absence de caractères statiques forts, mais c’est là que TypeScript intervient, pour combler cette lacune.

      TypeScript est un super-ensemble de JavaScript typé (facultatif) qui peut aider à construire et à gérer des projets JavaScript à grande échelle. Il peut être considéré comme du JavaScript avec des caractéristiques supplémentaires comme un fort typage statique, une compilation et une programmation orientée objet.

      Remarque : Le langage TypeScript est techniquement un super-ensemble de JavaScript, ce qui signifie que tout le code JavaScript est un code TypeScript valide.

      Voici quelques avantages de l’utilisation de TypeScript :

      1. Typage statique optionnel.
      2. Inférence de type.
      3. Capacité à utiliser des interfaces.

      Dans ce tutoriel, vous allez mettre en place un projet Node avec TypeScript. Vous créerez une application Express en utilisant le langage TypeScript et la transposerez dans un code JavaScript soigné et fiable.

      Conditions préalables

      Avant de commencer ce guide, vous devez avoir installé Node.js sur votre machine.  Vous pouvez y parvenir en suivant le guide Comment installer Node.js et créer un environnement de développement local guide pour votre système d’exploitation.

      Étape 1 – Initialisation d’un projet npm

      Pour commencer, créez un nouveau dossier nommé node_project et accédez à ce répertoire.

      • mkdir node_project
      • cd node_project

      Ensuite, initialisez-le en tant que projet npm :

      Après avoir lancé npm init, vous devrez fournir à npm des informations sur votre projet.  Si vous préférez laisser le npm prendre des valeurs par défaut raisonnables, vous pouvez ajouter le drapeau y pour ignorer les invites d’informations supplémentaires :

      Maintenant que votre espace de projet est mis en place, vous êtes prêt à passer à l’installation des dépendances nécessaires.

      Étape 2 — Installer des dépendances

      Avec un projet npm nu initialisé, l’étape suivante consiste à installer les dépendances nécessaires au lancement de TypeScript.

      Exécutez les commandes suivantes depuis le répertoire de votre projet pour installer les dépendances :

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      Le drapeau -D est le raccourci pour --save-dev.  Vous pouvez en savoir plus sur ce drapeau dans la documentation du npmjs.

      Il est maintenant temps d’installer le framework Express :

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      La deuxième commande installe Express** pour la prise en charge de TypeScript. Les types en TypeScript sont des fichiers, normalement avec une extension de .d.ts. Les fichiers sont utilisés pour fournir des informations de type sur une API, dans ce cas le framework Express.

      Ce paquet est nécessaire car TypeScript et Express sont des paquets indépendants. Sans le paquet @types/express, il n’y a aucun moyen pour TypeScript de connaître les types de classes Express.

      Étape 3 – Configurer TypeScript

      Dans cette section, vous allez paramétrer TypeScript et configurer le linting pour TypeScript. TypeScript utilise un fichier appelé tsconfig.json pour configurer les options du compilateur pour un projet. Créez un fichier tsconfig.json dans le root du répertoire du projet et collez-le dans le snippet suivant :

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Passons en revue certaines des clés du snippet JSON ci-dessus :

      • module: Spécifie la méthode de génération du code du module. Node utilise commonjs.
      • target: Spécifie le niveau du langage de sortie.
      • moduleResolution: Cela aide le compilateur à déterminer à quoi se réfère une importation. La valeur node imite le mécanisme de résolution des modules de Node.
      • outDir : Il s’agit de l’emplacement où les fichiers .js sont produits après la transpilation.  Dans ce tutoriel, vous le sauvegarderez sous dist.

      Une alternative à la création et au remplissage manuels du fichier tsconfig.json consiste à exécuter la commande suivante :

      Cette commande va générer un fichier tsconfig.json bien commenté.

      Pour en savoir plus sur les options de valeurs clés disponibles, la documentation officielle de TypeScript offre des explications sur chaque option.

      Vous pouvez maintenant configurer le linting TypeScript pour le projet. Dans un terminal fonctionnant au root du répertoire de votre projet, que ce tutoriel a établi comme node_project, exécutez la commande suivante pour générer un fichier tslint.json :

      • ./node_modules/.bin/tslint --init

      Ouvrez le nouveau site tslint.json et ajoutez la règle non-console en conséquence :

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      Par défaut, le linter TypeScript empêche l’utilisation du débogage par console d’où la nécessité d’indiquer explicitement au linter de révoquer la règle par défaut no-console.

      Étape 4 – Mise à jour du fichier package.json

      À ce stade du tutoriel, vous pouvez soit exécuter individuellement des fonctions dans le terminal, soit créer un script npm pour les exécuter.

      Dans cette étape, vous créerez un script start qui compilera et transpilera le code TypeScript, puis lancera l’application .js résultante.

      Ouvrez le fichier package.json et mettez-le à jour comme il se doit :

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      Dans le snippet ci-dessus, vous avez mis à jour le chemin principal et ajouté la commande start à la section scripts. En regardant la commande start, vous verrez que la commande tsc est d’abord exécutée, puis la commande node.  Cette opération permet de compiler et d’exécuter la sortie générée avec node.

      La commande tsc demande à TypeScript de compiler l’application et de placer la sortie .js générée dans le répertoire spécifié outDir tel qu’il est défini dans le fichier tsconfig.json.

      Étape 5 – Créer et faire fonctionner un serveur Express de base

      Maintenant que TypeScript et son linter sont configurés, il est temps de construire un serveur Node Express.

      Tout d’abord, créez un dossier src dans le root du répertoire de votre projet :

      Créez ensuite un fichier nommé app.ts dans celui-ci :

      À ce stade, la structure du dossier devrait ressembler à ceci :

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Ouvrez le fichier app.ts avec un éditeur de texte de votre choix et collez le code suivant :

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      Le code ci-dessus crée un serveur Node qui écoute les requêtes sur le port 3000.  Lancez l’application en utilisant la commande suivante :

      S’il fonctionne correctement, un message sera enregistré sur le terminal :

      Output

      • server is listening on 3000

      Maintenant, vous pouvez visiter http://localhost:3000 dans votre navigateur et vous devriez voir le message :

      Output

      • The sedulous hyena ate the antelope!

      Fenêtre du navigateur avec le message : The sedulous hyena ate the antelope!

      Ouvrez le fichier dist/app.js et vous trouverez la version transposée du code TypeScript :

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      À ce stade, vous avez configuré avec succès votre projet Node pour utiliser TypeScript.

      Conclusion

      Dans ce tutoriel, vous avez appris pourquoi TypeScript est utile pour écrire un code JavaScript fiable.  Vous avez également découvert certains des avantages à travailler avec TypeScript.

      Enfin, vous avez mis en place un projet Node en utilisant le framework Express, mais vous avez compilé et exécuté le projet en utilisant TypeScript.



      Source link

      Como usar o EJS para modelar seu aplicativo Node


      Introdução

      Ao criar aplicativos Node dinamicamente, uma maneira fácil e rápida de modelar seu aplicativo pode ser necessária.

      O Jade é o mecanismo de exibição do Express por padrão, mas a sintaxe do Jade pode ser complexa de mais para muitos casos de uso. O EJS é uma alternativa que cumpre essa função muito bem e é bastante fácil de ser configurado. Vamos dar uma olhada em como criar um aplicativo simples e usar o EJS para incluir partes repetíveis do nosso site (parciais) e passar dados para nossas exibições.

      Como configurar o aplicativo de demonstração

      Estaremos fazendo duas páginas para nosso aplicativo, sendo uma com largura total e a outra com uma barra lateral.

      Obtenha o código: é possível encontrar um repositório git com o código de demonstração completo no GitHub aqui

      Estrutura de arquivos

      Aqui estão os arquivos que serão necessários para o nosso aplicativo. Vamos fazer o modelamento dentro da pasta de exibições e o resto do processo segue o padrão para práticas com o Node.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      O package.json armazenará as informações do nosso aplicativo Node e as dependências necessárias (express e EJS). O server.js armazenará as configurações do nosso servidor Express. Vamos definir as rotas para nossas páginas aqui.

      Configuração do Node

      Vamos entrar em nosso arquivo package.json e configurar nosso projeto por lá.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Tudo o que precisamos é o Express e EJS. Agora, precisamos instalar as dependências que acabamos de definir. Vá em frente e execute:

      Com todas as nossas dependências instaladas, vamos configurar o nosso aplicativo para usar o EJS e definir nossas rotas para as duas páginas que precisamos: a página de índica (largura total) e a página “sobre” (barra lateral). Isso tudo será feito dentro do nosso arquivo server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Aqui definimos nosso aplicativo e configuramos ele para ser exibido na porta 8080. Também é necessário definir o EJS como o mecanismo de exibição para o nosso aplicativo Express usando app.set('view engine', 'ejs');. Observe como enviamos uma exibição para o usuário usando o res.render(). É importante notar que o res.render() irá procurar em uma pasta de exibições pela exibição. Dessa forma, só é preciso definir pages/index, já que o caminho completo é views/pages/index.

      Iniciar o nosso servidor

      Vá em frente e inicie o servidor usando:

      Agora, podemos ver nosso aplicativo em um navegador em http://localhost:8080 e http://localhost:8080/about. Nosso aplicativo está configurado e precisamos definir nossos arquivos de exibição e ver como o EJS funciona neles.

      Criar as parciais do EJS

      Assim como muitos outras aplicativos que compilamos, grande parte do código será reutilizado. Iremos chamá-los de parciais e definir três arquivos que vamos usar em todo o nosso site: head.ejs, header.ejs e footer.ejs. Vamos criar esses arquivos agora.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Adicionar as parciais do EJS às exibições

      As nossas parciais já estão definidas. Tudo o que precisamos fazer é incluí-las em nossas exibições. Vamos entrar em index.ejs e about.ejs e usar a sintaxe include para adicionar as parciais.

      Sintaxe para incluir uma parcial do EJS

      Utilize <%- include('RELATIVE/PATH/TO/FILE') %> para incorporar um parcial do EJS em outro arquivo.

      • O hífen <%- é usado, ao invés de apenas <% para dizer ao EJS para renderizar HTML não processado.
      • O caminho para o parcial é relativo ao arquivo atual.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Agora, podemos observar nossa exibição definida no navegador em http://localhost:8080. node-ejs-templating-index

      Para a página “sobre”, também adicionamos uma barra lateral de inicialização para demonstrar como as parciais podem ser estruturadas para reuso em diferentes modelos e páginas.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Se visitarmos http://localhost:8080/about, veremos nossa página “sobre” com uma barra lateral! node-ejs-templating-about

      Agora, podemos começar a usar o EJS para passar dados do nosso aplicativo Node para nossas exibições.

      Passar dados para exibições e parciais

      Vamos definir algumas variáveis básicas e uma lista para passar para nossa página inicial. Volte para seu arquivo server.js e adicione o código a seguir dentro da sua rota app.get("https://www.digitalocean.com/").

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Acabamos de criar uma lista chamada mascots e uma string simples chamada tagline. Vamos entrar em nosso arquivo index.ejs e usá-los.

      Renderizar uma única variável no EJS

      Para ecoar uma única variável, utilizamos apenas <%= tagline %>. Vamos adicionar isto em nosso arquivo index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Executar um loop em dados no EJS

      Para executar um loop em nossos dados, vamos utilizar o .forEach. Vamos adicionar isto em nosso arquivo de exibição:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Agora, podemos ver em nosso navegador que as novas informações foram adicionadas!

      node-ejs-templating-rendered

      Passar dados para uma parcial no EJS

      A parcial do EJS tem acesso aos mesmos dados que a exibição pai. Mas tenha cuidado: caso esteja fazendo referência a uma variável em uma parcial, ela precisa estar definida em todas as exibições que usam a parcial ou ocorrerá um erro.

      Também é possível definir e passar variáveis a uma parcial do EJS na sintaxe include desta forma:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      No entanto, é necessário novamente ter cuidado em assumir que uma variável já está definida.

      Se quiser fazer referência a uma variável em uma parcial que talvez nem sempre esteja definida e atribuir-lhe um valor padrão, faça isso desta forma:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      Na linha acima, o código do EJS está renderizando o valor de variant caso esteja definido e default caso contrário.

      Conclusão

      O EJS permite a criação rápida de aplicativos quando não precisamos de nada muito complexo. Usando parciais e tendo a capacidade de passar facilmente variáveis às nossas exibições, somos capazes de criar aplicativos fantásticos rapidamente.

      Para outras referências sobre o EJS, consulte a documentação oficial aqui.



      Source link