Back

Le moteur de modèle Jade

Le moteur de modèle Jade

  1. Objectifs

    • Être capable d’utiliser le moteur de modèle Jade dans l’application Node.js
    • Connaître les boucles et les instructions conditionnelles dans Jade

  2. Présentation

      3. Jade Node Template Engine

    • Jade est un moteur de création de modèles élégant, principalement utilisé pour la création de modèles côté serveur dans NodeJS.
    • Autrement, Jade vous offre une nouvelle façon puissante d’écrire du balisage, avec un certain nombre d’avantages par rapport au HTML ordinaire .
    • Étant donné que la plupart des éditeurs de texte conçus pour le Web suppriment l’indentation (et certains ne conservent que les caractères de nouvelle ligne), compressant ainsi le fichier et l’optimisant pour l’utilisation Web. Mais cela ne sert à rien pour écrire Jade. Parce que l’indentation est au cœur de la syntaxe Jade!
    • Donc, dans ce tutoriel, nous utilisons une extension Chrome appelée Jade Editor pour illustrer les boucles et les instructions conditionnelles.
    • Vous pouvez simplement tester votre code dans cette extension Google Chrome, puis copier le code dans votre fichier réel. Cela aiderait même à réduire les erreurs compliquées dans les fichiers longs.



  3. Installation et Syntaxe de Jade

    • Installation
      • Installez jade dans votre projet en utilisant la commande NPM suivante : npm install jade --global
    • Syntaxe de Jade
      • Jade utilise les espaces et l’indentation dans son langage. Par conséquent, nous devons faire attention à suivre la syntaxe appropriée.
      • Tout texte au début d’une ligne (par défaut) est interprété comme une balise HTML.
      • Le principal avantage de Jade est que ce texte rend à la fois les balises de fermeture et d’ouverture de l’élément HTML, ainsi que les symboles <> et </>.
      • Par conséquent, nous enregistrons de nombreuses frappes au fur et à mesure que les développeurs écrivent en Jade!
      • Si vous voulez essayer cela au fur et à mesure, vous pouvez utiliser CodePen et choisir Jade comme préprocesseur HTML ou utiliser le compilateur en ligne sur la page officielle de Jade pour compiler votre Jade en HTML.
    • Exemple

        • Jade Node Template Engine

      Soyez prudent lorsque vous donnez des espaces et des indentations en Jade. Une petite erreur peut modifier la sortie.

  4. Fonctionnalités de Jade

    1. Balises simples
      • Comme vous l’avez peut-être remarqué précédemment, il n’y a pas de balises « fermantes » dans Jade. Au lieu de cela, Jade utilise l’indentation (c’est-à-dire un espace blanc) pour déterminer comment les balises sont imbriquées.

        • Jade Html 
        doctype html
html
  head
    title mon modèle de jade
  body
    h1 Bonjour #{name}
        		 
        <!DOCTYPE html>
<html>
  <head>
    <title>mon modèle de jade</title>
  </head>
  <body>
    <h1>Bonjour Riadh</h1>
  </body>
</html>
    2. Identifiant et classes
      • Comment ajouter des attributs à nos balises? Très simple vraiment. Revenons à notre premier exemple et ajoutons quelques classes et identifiants.

        • Jade Html 
        #content
  .block
    input#bar.foo1.foo2
        		 
        <div id="content">
  <div class="block">
    <input id="bar" class="foo1 foo2"/>
  </div>
</div>
    3. Les listes

        4. Jade Html 
          h3 Utilisation des listes avec Jade
  ul
    Liste non ordonnée
    li Liste 01
    li Liste 02
    li Liste 03 
  ol
    Liste ordonnée
    li Liste 01
    li Liste 02
    li Liste 03
        		 
        <h3>Utilisation des listes avec Jade</h3>
  <ul>
    Liste non ordonnée
       <li>Liste 01</li>
       <li>Liste 02</li>
       <li>Liste 03</li>
  </ul>
  <ol>
    Liste ordonnée
       <li>Liste 01</li>
       <li>Liste 02</li>
       <li>Liste 03</li>
  </ol>
    4. Les attributs
      • Les attributs sont ajoutés en les plaçant entre parenthèses juste après le nom de la balise. Ils suivent le format name=value. De plus, plusieurs attributs doivent être séparés par une virgule. Par exemple,

        • Jade Html 
        html
  head
    link(type='text/css', rel='stylesheet', href='/site.css')  
    title Hello
  body
    form
      .mb-3
        label.form-label Email address 
        input#exampleInputEmail1.form-control(type='email', aria-describedby='emailHelp')
        #emailHelp.form-text We&apos;ll never share your email with anyone else.
      .mb-3
        label.form-label(for='exampleInputPassword1') Password   
        input#exampleInputPassword1.form-control(type='password')
      .mb-3.form-check
        input#exampleCheck1.form-check-input(type='checkbox')  
        label.form-check-label Check me out
      button.btn.btn-primary(type='submit') Submit
        		 
        <!doctype html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="/site.css" />
    <title>Hello</title>
</head>

<body>
    <form>
  <div class="mb-3">
    <label class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>

</html>

  5. Les Boucles et conditions dans Jade

      • Jade fournit une excellente syntaxe de boucle afin que vous n’ayez pas besoin de recourir à JavaScript. Passons en boucle sur un tableau:
    1. boucle for

        2. Jade Html 
        - var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name
        		 
        <div>
  <h1>Famous Droids from Star Wars</h1>
  <div class="card">
    <h2>R2D2</h2>
  </div>
  <div class="card">
    <h2>C3PO</h2>
  </div>
  <div class="card">
    <h2>BB8</h2>
  </div>
</div>
        		 
        ul
each val in [1, 2, 3, 4, 5]
li= val
        		 
        <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
        		 
        ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
        		 
        <ul>
<li>0: zero</li>
<li>1: one</li>
<li>2: two</li>
</ul>
    2. boucle while

        3. Jade Html 
        - var n = 0
ul
while n < 4
li= n++
        		 
        <ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>



Moteurs de modèle pour Node.js
Sommaire du cours Node.js
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Créer un serveur Web en Node.js
28 mars, 2021

Comment installer node.js sur Windows Démarrer avec Node.js Créer un serveur Web en Node.js Le fichier package.json Les Modules globaux dans node.js Créer un serveur Web en Node.js Objectifs Apprendre à créer un serveur Web à l’aide du module HTTP …

Les Modules globaux dans node.js
28 mars, 2021

Comment installer node.js sur Windows Démarrer avec Node.js Créer un serveur Web en Node.js Le fichier package.json Les Modules globaux dans node.js Les Modules globaux dans node.js Objectifs Connaitre les modules globaux, leurs fonctionnement et les raisons pour lesquelles nous …

Le fichier package.json
28 mars, 2021

Comment installer node.js sur Windows Démarrer avec Node.js Créer un serveur Web en Node.js Le fichier package.json Les Modules globaux dans node.js Le fichier package.json Objectifs Comprendre ce qu’est réellement le fichier package.json et ses caractéristiques Qu’est-ce que package.json Ce …

Leave A Reply