In this case, Pug is used to write templates that are compiled into functions that take in data and render HTML documents. This means it’s a tool that generates documents from templates that integrate some specified data.

Pug (formerly known as Jade) is a template engine. You’ll learn how to install Pug in your Angular apps and transition existing apps that use HTML to use Pug. In this article, I’ll cover how you - as an Angular developer - can use Pug to write better templates more efficiently. This is in spite of many more efficient options such as Pug, Slim, HAML among others being in existence. However, when it comes to templates, only two options are available: HTML and SVG. Components provide an amazing means to structure views, facilitate code reusability, interpolation, data binding, and other business logic for views.Īngular CLI supports multiple built-in CSS preprocessor options for component styling like Sass/SCSS, LESS, and Stylus. In this article, Zara Cooper explains what Pug is and how you can use it in your Angular app.Īs a developer, I appreciate how Angular apps are structured and the many options the Angular CLI makes available to configure them. In Angular, you can use Pug to write component templates and improve a project’s development workflow. Render a set of data console.Pug is a template engine that allows you to write cleaner templates with less repetition. Compile the source code const compiledFunction = pug. - template.pug p #'s Pug source code! const pug = require( 'pug') The compiled function can be re-used, and called with different sets of data. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.

pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “ locals”) as an argument. The general rendering process of Pug is simple.

Pug is available via npm: $ npm install pug Sponsors coin news Getting Started Installation ¶

Pug template engine example