concept EJS in category node

This is an excerpt from Manning's book Get Programming with Node.js. Login to get full access to this book.

In lesson 9, you constructed a routing system for your Express.js application. In this lesson, you learn about templating engines and see how to connect your routes to views. You learn how to work with Embedded JavaScript (EJS), a syntax for applying Java-Script functions and variables within your views, as well as how to pass data into those views from your controllers. You start by setting up EJS with your application and seeing how templating engines work. By the end of the lesson, you’ll understand the syntax needed to master EJS in your Express.js applications. At the end of the lesson, you install the express-ejs-layouts package to use dynamic layouts in your application.

Figure 10.1. Converting EJS to HTML

In this lesson, you learned how to use templates in your application with EJS. You also learned how to pass data from your controllers to application views. At the end of the lesson, you learned how to create a layout with the express-ejs-layouts package and partials to share content across your views. In lesson 11, you add a configuration to start your application with a different command and handle errors with new middleware functions.

This is an excerpt from Manning's book Node.js in Action, Second Edition. Login to get full access to this book.

Now res.render can render HTML files formatted with EJS. If you replace res.send (articles) in the app.get('/articles') route handler from listing 3.4, visiting http://localhost:3000/articles in a browser should attempt to render articles.ejs.

Each engine allows you to write HTML in an alternative way. Let’s start with EJS.

Note that if you don’t like the characters used by EJS to specify tags, you can customize them, like so:

const ejs = require('ejs');
ejs.delimiter = '$'
const template = '<$= message $>';
const context = { message: 'Hello template!' };
console.log(ejs.render(template, context));

copy

Now that you know the basics of EJS, let’s look at some more detailed examples.

7.2.3. Using EJS for client-side applications

To use EJS on the client side, you first need to download the EJS engine to your working directory, as shown by the following commands:

cd /your/working/directory
curl -O https://raw.githubusercontent.com/tj/ejs/master/lib/ejs.js

copy

After you download the ejs.js file, you can use EJS in your client-side code. The following listing shows a simple client-side application of EJS. If you save this file as index.html, you should be able to open it in a browser to see the results.

Listing 7.7. Using EJS to add templating capabilities to the client side

EJS supports optional, in-memory caching of template functions: after parsing your template file once, EJS will store the function that’s created by the parsing. Rendering a cached template will be faster because the parsing step can be skipped.

This is an excerpt from Manning's book Express in Action: Writing, building, and testing Node.js applications. Login to get full access to this book.

We’ll add more to this file in a moment. The first block is the same as always: require what you need to. Then you say, “My views are in a folder called views.” After that, you say, “Use EJS.” EJS (documentation at https://github.com/tj/ejs) is a templating language that compiles to HTML. Make sure to install it with npm install ejs --save.

In this chapter we’ll talk about views, which give you a convenient way to dynamically generate content (usually HTML). You’ve seen a view engine before; EJS has helped you inject special variables into HTML. But although EJS provided a conceptual understanding of views, we never really explored everything that Express (and the other view engines) had to offer. You’ll learn the many ways to inject values into templates; see the features of EJS, Pug, and other Express-compatible view engines; and explore subtleties in the world of views. Let’s get started.

7.2. Everything you need to know about EJS

One of the simplest and most popular view engines out there is called EJS (Embedded JavaScript.) It can do templating for simple strings, HTML, plain text—you name it. It lightly integrates itself with whatever tool you use. It works in the browser and Node. If you’ve ever used ERB from the Ruby world, you’ll find that EJS is very similar. In any case, it’s pretty simple.

Two Versions of EJS

There are two versions of EJS maintained by two different groups of people. They’re similar but not identical. The one we’ll be using is by TJ Holowaychuck, the creator of Express. If you look for a package called ejs on npm, this is the one you’ll find. But if you visit http://embeddedjs.com/, you’ll find a very similar library with the same name. A lot of the functionality is the same, but it’s a different library, last updated in 2009. It doesn’t work in Node, and it has some debatably sexist sentences in its documentation. Avoid it!

Listing 7.7. Including a header and footer from EJS

<% include header %> <h1>Welcome to my page!</h1> <p>This is a pretty cool page, I must say.</p> <% include footer %>

copy