Node.js Tutorial for Beginners (Part 2): Working With Templating Engines

收藏待读

Node.js Tutorial for Beginners (Part 2): Working With Templating Engines

Welcome back to our series on Node.js for beginners!Last time, we went over the advantages of using Node.js and Express, got our environment set up, and coded up some basic web pages. In today’s post, we’ll go over the roles of templating engines in Node.js applications and figure out how to use them to get some basic HTML markup onto our pages. 

Project Recap

I’ll be basing the app I work on in this series of a project from a Udemy course (found here ) that I’ve been using on-and-off for a while. I love to travel, and the US National Parks are some of my favorite places to go. To teach myself Node.js, Express.js, templating engines, and Bootrap, I’m going to design an application to keep track of my park travels.

Introduction to Templating Engines

Templating engines are essentially pieces of software that allow you to render markup on the web pages you create with the powerful Node/Express combination we explored in the last article. The explanation given by the Express docs , which is far better than a beginner developer like me could do, is as follows: 

A template engine  enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

Per these same docs, web developers working with Node and Express tend to use one of three popular template engines: Pug , Mustache , and EJS . After poking around the documentation for each of these options, I ultimately decided to go with EJS as it allows me to use actual HTML to create my markup, rather than a syntactically similar, but ultimately different, style of code. 

To give a quick example of these three template engines, I’ll show how to create a simple list using each. (Note: the code for Pug and Mustache in this section is taken from the docs linked to above.)

Lists in Pug

Here’s how we’d have to go about creating a list with Pug:

var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
each item in list
  li= item

Come render time, however, this code will act like standard HTML, and be rendered like so:

  • Uno
  • Dos
  • Tres
  • Cuatro
  • Cinco
  • Seis
  • Lists in Mustache

    In a Mustache view file, we’d have to enter the following code:

    {
      "stooges": [
        { "name": "Moe" },
        { "name": "Larry" },
        { "name": "Curly" }
      ]
    }

    In the Mustache template file, we’d then enter this code:

    {{#stooges}}
    {{name}}
    {{/stooges}}

    The output would, just like Pug, be rendered as standard HTML:

    Moe
    Larry
    Curly

    Lists in EJS

    In EJS, all we have to do is create a .ejs file, let’s say landing.ejs , link this page in our Express code, and then type in regular old HTML. Here’s an example: 

    app.js (Node/Express code) 

    const ejs = require('ejs');
    
    app.get("/", function(req, res){
      res.render("landing");
    });

    landing.ejs

    To me, this seems much easier. But I also don’t want to make it seem like Pug and Mustache aren’t great options. They’re widely popular and have huge open source communities around them. No matter which of the three you go with, you’ll be working with great software. EJS just makes the most sense to my (admittedly strange) mind.

    Me Make Things Pretty(ish)

    As promised in my last article, we’ll make the basic pages we got to render using basic Express actually look like a web page (granted, at first, it’ll look like something straight outta the ’90s). And that’s why I’m bringing EJS into this tutorial.

    To get EJS onto your machine, run the command npm i ejs --save . Like in the section above on creating a list in EJS, we then have to tinker with the app.js file we were using to get my Node servers and Express pages up and running. In this file, we have to tell Node that we’re using EJS as our templating engine. We can do this like so: 

    const ejs = require('ejs'); 
    
    app.set ("view engine", "ejs");

    Okay, now Node knows to use EJS to render the markup for our web pages. Awesome! Next, we need to create some actual EJS files. This part is pretty simple. cd  into our dzone_app1 project, and create a views directory with the command  $mkdir views . Within this directory, let’s create our first EJS file (I’ve called my file landing.ejs) with the command $touch landing.ejs

    Fantastic! Now that we’ve got that file going, we can punch in the following HTML: 

    National Park App Page

    Parks I've Seen:

    Park Name:

    Park Picture:

    Then, if we run our server with the node app.js command, we should see the HTML render on the page.  

    Node.js Tutorial for Beginners (Part 2): Working With Templating Engines

    Voilà! Magnifique! Alright, that might be hyperbole, but I’m still super happy that in just two days we’ve gone from Node novices to an actual web page using a markup language. Pretty neat.

    To get the basic skeleton of the application down, let’s create one more page, which I’ll denote in my app.js file as /parks . The JavaScript to create this page server-side will look like this: 

    app.get("/parks", function(req,res){
        res.render("parks");
    });

    Then $touch   another EJS file, parks.ejs, and label it with a basic  h2  tag (more for organizational purposes than coding reasons). 

    The Parks I've Seen

    When we restart the server, and go to the page, ending the URL address in /parks , we should see the following: 

    Node.js Tutorial for Beginners (Part 2): Working With Templating Engines

    Conclusion

    Cool! We now have two pages with the basic HTML skeletons set up for our app. Inthe next article, we’ll link these pages together and implement some basic JavaScript logic. 

    原文 : DZone

    相關閱讀

    免责声明:本文内容来源于Server Zone,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。