I want to use a simple loop like `for(int i=0; i&lt;10; i++){}`.

How do I use it in the Jade engine? I&#39;m working with Node.js and use the expressjs framework.

Loop in Jade (currently known as &quot;Pug&quot;) template engine

I am using a template as a base, and want it to be aware of some variables set in the page that is using it...

File: template.jade

    vars = vars || {some:&quot;variables&quot;}
    !!! 5
    head
        title vars.some

File: page.jade

    vars = {some:&quot;things&quot;} //- this does not get used from within template.jade
    extends template
    
I want the compiled page.jade to have a title &quot;things&quot;

how to pass variables between jade templates

i need your help, i&#39;m trying to display some datas from my firebase but it trhows me an error like `InvalidPipeArgument: &#39;[object Object]&#39; for pipe &#39;AsyncPipe&#39;`.

----------
There is my service: 

    import { Injectable } from &#39;@angular/core&#39;;
    import { AngularFireDatabase } from &#39;angularfire2/database&#39;;

    @Injectable()
    export class MoviesService {

      constructor(private db: AngularFireDatabase) {}
      get = () =&gt; this.db.list(&#39;/movies&#39;);
    }

----------
There is my component:

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { MoviesService } from &#39;./movies.service&#39;;

    @Component({
      selector: &#39;app-movies&#39;,
      templateUrl: &#39;./movies.component.html&#39;,
      styleUrls: [&#39;./movies.component.css&#39;]
    })
    export class MoviesComponent implements OnInit {
      movies: any[];

      constructor(private moviesDb: MoviesService) { }

      ngOnInit() {
        this.moviesDb.get().subscribe((snaps) =&gt; {
          snaps.forEach((snap) =&gt; {
            this.movies = snap;
            console.log(this.movies);
          });
       });
     }
    }


----------
And there is mmy pug:

    ul
      li(*ngFor=&#39;let movie of (movies | async)&#39;)
        | {{ movie.title | async }}



Angular 4: InvalidPipeArgument: &#39;[object Object]&#39; for pipe &#39;AsyncPipe&#39;

I am trying to create a webpage which is made up of a header and bellow the header a list of items. I want the list of items to be vertically scrollable. I also would like the webpage to take up the entire window but not be bigger. Currently my problem is the list of items is not scrollable and instead extends far below the bottom of the window and this is causing the window to be scrollable. What should the *CSS* properties be on the *html*, *body*, *header* and *list items*?

    doctype html
    html
        head
            link(href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot;)
        body
            div#wrapper
                h1 Interactive Contact Directory
                div(class=&quot;tools&quot;)
                    |Search: 
                    br
                    input(type=&quot;text&quot; id=&quot;searchBox&quot;)
                    select(name=&quot;searchBy&quot; id=&quot;searchBy&quot;)
                        option(value=&#39;firstname&#39;) First Name
                        option(value=&#39;lastname&#39;) Last Name
                        option(value=&#39;email&#39;) Email
                    br
                    br
                div(id=&quot;listingHolder&quot;)
                    ul(id=&quot;listing&quot;)
                div(id=&quot;listingView&quot;)

Bellow is the current style sheet I have


    html{
        height: 100%;
    }
    body {
        background:#121212;
        margin:0px;
        padding:0px;
        font-family:&quot;Open Sans&quot;, sans-serif;
        height: 100%;
    }
    #wrapper {
        max-height: 100%;
    }
    h1 {
        margin:0px;
        color:#fff;
        padding:20px;
        text-align:center;
        font-weight:100;
    }
    .tools {
        text-align:center;
        color:#fff;
    }
    #searchBox {
        padding:7px;
        border:none;
        border-radius:5px;
        font-size:1.2em;
    }
    a.filter {
        display:inline-block;
        padding:5px 10px;
        margin:5px;
        background:#0472C0;
        color:#fff;
        text-decoration:none;
        border-radius:3px;
    }
    a.filter:hover {
        background:#0B9DE0;
        color:#fff;
    }
    ul#listing {
        list-style:none;
        padding:0px;
        margin:0px;
        background:#fff;
        width:100%;
    }
    ul#listing li {
        list-style:none;
        border-bottom:1px solid #eee;
        display:block;
    }
    ul#listing li .list-header {
        padding:10px;
        cursor:pointer;
        display:block;
    }
    
    ul#listing li .list-header:hover {
        background:#7893AB;
        color:#fff;
    }
    ul#listing li .list-header.active {
        background:#447BAB;
        color:#fff;
    }
    ul#listing li .details {
        display:none;
        background:#efefef;
        padding:20px;
        font-size:0.9em;
    }
    #listingHolder{
        width: 50%;
        overflow: scroll;
    }

CSS how to make scrollable list

I&#39;m working with Jade and Express and I would like to use a variable in my include statement. For example:

app.js

    app.get(&#39;/admin&#39;, function (req, res) {
      var Admin = require(&#39;./routes/admin/app&#39;).Admin;

      res.render(Admin.view, {
        title: &#39;Admin&#39;,
        page: &#39;admin&#39;
      });
    });

layout.jade

    - var templates = page + &#39;/templates/&#39;
    
    include templates

When I do this I get the error `EBADF, Bad file descriptor &#39;templates.jade&#39;`

I even tried

    include #{templates}

to no avail.


Use a variable in a Jade include

I&#39;m trying to get JavaScript to render on my page using Jade (http://jade-lang.com/)

My project is in NodeJS with Express, eveything is working correctly until I want to write some inline JavaScript in the head. Even taking the examples from the Jade docs I can&#39;t get it to work what am I missing?

Jade template
------------

    !!! 5
    html(lang=&quot;en&quot;)
      head
        title &quot;Test&quot;
        script(type=&#39;text/javascript&#39;)
          if (10 == 10) {
            alert(&quot;working&quot;)
          }
      body

Resulting rendered HTML in browser
------

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;title&gt;&quot;Test&quot;&lt;/title&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
        &lt;if&gt;(10 == 10) {&lt;alert working&gt;&lt;/alert&gt;&lt;/if&gt;}
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
    &lt;/html&gt;

Somethings definitely a miss here any ideas?

How can I render inline JavaScript with Jade / Pug?

When using Express for Node.js, I noticed that it outputs the HTML code without any newline characters or tabs. Though it may be more efficient to download, it&#39;s not very readable during development.

How can I get Express to output nicely formatted HTML?

How can I get Express to output nicely formatted HTML?

I just started using Sublime Text 2 on Mac. I also just started using [Jade](http://jade-lang.com) for my views in Node.js, and am wondering if there is a way to add syntax highlighting for Jade into Sublime Text 2.

Syntax highlighting for Jade in Sublime Text 2?

I&#39;m having trouble with a variable (config) declared in a jade template file (index.jade) that isn&#39;t passed to a javascript file, which then makes my javascript crash. Here is the file (views/index.jade):

    h1 #{title}
    
    script(src=&#39;./socket.io/socket.io.js&#39;)
    script(type=&#39;text/javascript&#39;)
      var config = {};
      config.address = &#39;#{address}&#39;;
      config.port = &#39;#{port}&#39;;
    script(src=&#39;./javascripts/app.js&#39;)

Here is a part of my app.js (server side):

      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(express.static(__dirname + &#39;/public&#39;));
    });
    
    app.configure(&#39;development&#39;, function(){
      app.set(&#39;address&#39;, &#39;localhost&#39;);
      app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
    });
    
    app.configure(&#39;production&#39;, function(){
      app.use(express.errorHandler());
    });
    
    // Routes
    
    app.get(&#39;/&#39;, function(req, res){
      res.render(&#39;index&#39;, {
        address: app.settings.address,
        port: app.settings.port
    });
    });
    
    if (!module.parent) {
      app.listen(app.settings.port);
      console.log(&quot;Server listening on port %d&quot;,
    app.settings.port);
    }
    
    // Start my Socket.io app and pass in the socket
    require(&#39;./socketapp&#39;).start(io.listen(app));

And here is a part of my javascript file that crashes (public/javascripts/app.js):

    (function() {
            var socket = new io.Socket(config.address, {port: config.port, rememberTransport: false});

I&#39;m running the site on development mode (NODE_ENV=development) on localhost (my own machine). I&#39;m using node-inspector for debugging, which told me that the config variable is undefined in public/javascripts/app.js.

Any ideas?? Thanks!!

How to pass variable from jade template file to a script file?

I&#39;m trying to author a few paragraphs with Jade, but finding it difficult when there are links  inside a paragraph.

The best I can come up with, and I&#39;m wondering if there&#39;s a way to do it with less markup:

    p
      span.
       this is the start
       of the para.
      a(href=&quot;http://example.com&quot;) a link
      span.
        and this is the rest of
        the paragraph.

Jade: Links inside a paragraph

Jade versus EJS, what are the pros and cons of each and what purposes are each designed for?

Are there [any other express-compatible template engines](https://github.com/joyent/node/wiki/modules#wiki-templating) that are good and why?

What are the pros and cons of both Jade and EJS for Node.js templating?

I am new(ish) to the whole javascript full stack applications, and completely new to Angular, so I was hoping somebody can put the record straight for me here.

Why would I need to use a templating framework like Jade or Handlebars when writing client side apps using AngularJS.

I should say that I have never used any of these templating frameworks either. So I am not familiar with the advantages completely. But when I look at Handlebars for example, it does many of the same things as I would do in Angular, such as looping etc.

As far as I can tell, it would make most sense to create the templates in Angular using proper HTML and then do all templating client side, and combine this with an API first approach using node and mongo for example.

The reason for this confusion is that a lot of the examples I find on GitHub make use of Jade, and it seems counter intuitive for me.

Please enlighten me, and set me straight. I would love to learn some best practices from people who know much more than I do.

Thanks

What&#39;s the use of Jade or Handlebars when writing AngularJs apps

I have a button &quot;Choose file&quot; as follows (I am using Jade but it should be the same as Html5):

     input(type=&#39;file&#39;, name=&#39;videoFile&#39;)

In the browser this shows a button with a text next to it &quot;No file chosen&quot;. I would like to change the &quot;No file chosen&quot; text to something else, like &quot;No video chosen&quot; or &quot;Choose a video please&quot;. I followed the first suggestions here:

https://stackoverflow.com/questions/5927212/i-dont-want-to-see-no-file-chosen-for-a-file-input-field

But doing this did not change the text:

     input(type=&#39;file&#39;, name=&#39;videoFile&#39;, title = &quot;Choose a video please&quot;)

Can anybody help me figure out where the problem is?

Change the &quot;No file chosen&quot;:

How to I get rid of Jade while using Express with Node.JS? I want to just use plain html. In other articles I have seen that people recommended app.register() which is now deprecated in the latest version.

Using HTML in Express instead of Jade

I am writing an application with the Node.js, Express.js, and [Jade][1] combination.

I have file `client.js`, which is loaded on the client. In that file I have code that calls functions from other JavaScript files. My attempt was to use

    var m = require(&#39;./messages&#39;);

in order to load the contents of `messages.js` (just like I do on the server side) and later on call functions from that file. However, `require` is not defined on the client side, and it throws an error of the form `Uncaught ReferenceError: require is not defined`.

These other JavaScript files are also loaded at runtime at the client, because I place the links at the header of the webpage. So the client knows all the functions that are exported from these other files.

How do I call these functions from these other JavaScript files (such as `messages.js`) in the main `client.js` file that opens the socket to the server?

  [1]: https://en.wikipedia.org/wiki/Jade_(disambiguation)#Technology





Client on Node.js: Uncaught ReferenceError: require is not defined

I&#39;m currently using Jade on a new project. I want to render a page and check if a certain variable is available.

`app.js`:

    app.get(&#39;/register&#39;, function(req, res){
      	res.render(&#39;register&#39;, {
    	    locals: {
    	      title: &#39;Register&#39;,
    		  text: &#39;Register as a user.&#39;,
    	    }
    	  });
    });

`register.jade`:


    - if (username)
    p= username
    - else
    p No Username!


I always get the following error:

    username is not defined

Any ideas on how I can fix this?

Jade - Template Engine: How to check if a variable exists

I am very new to `Node.js` and I tried to run a project (made by other developer) by having a command in terminal `node app.js`. But I encountered below error, do you have any idea how to run this project?

I followed few instructions [here][1] to run a project.

Error logs below:

    Junryls-Mac-mini:app junrylmaraviles$ node app.js
    
    /Users/junrylmaraviles/Desktop/myfolder/mysubfolder/app/app.js:1
    (function (exports, require, module, __filename, __dirname) { define(&#39;src/app&#39;
                                                                  ^
    ReferenceError: define is not defined
        at Object.&lt;anonymous&gt; (/Users/junrylmaraviles/Desktop/myfolder/mysubfolder/app/app.js:1:63)
        at Module._compile (module.js:456:26)
        at Object.Module._extensions..js (module.js:474:10)
        at Module.load (module.js:356:32)
        at Function.Module._load (module.js:312:12)
        at Function.Module.runMain (module.js:497:10)
        at startup (node.js:119:16)
        at node.js:902:3


  [1]: https://stackoverflow.com/questions/8778604/how-do-i-run-a-index-jade-file

Node - how to run app.js?

I tried making comments in Jade/pug, but the comments render as text in the HTML. This is my code:

    doctype html
    
    html(lang=&#39;en&#39;)
        body
            / This should be a comment

What am I doing something stupid?

Comments in Jade/pug

Is there a way to do this inline in a jade template?

    if(typeof fromEdit != &#39;undefined&#39;)
       div#demo.collapse.in
    else
       div#demo.collapse

Would like to do this conditional check &quot;inline&quot; and the result would add the .in to the end of the div if fromEdit exists.  

Jade conditional (if/else) to add class to div inline

I&#39;m pretty sure that this is a no-brainer but I didn&#39;t find any snippet of sample code.
What&#39;s the best way to insert line breaks (aka the good ol&#39; br/)?

As far as I can see if I put a &quot;br&quot; at the beginning of an empty line, it is rendered as `&lt;br/&gt;` but if I have to show several lines of text, the resulting code is quite verbose:

    .poem 
		p 
			| Si chiamava Tatiana, la sorella… 
			br 
			| Noi siamo i primi, almeno lo crediamo
			br 
			| Che un tale nome arditamente nella
			br 
			| Cornice d’un romanzo introduciamo.
			br 
			| E che dunque? E’ piacevole, sonoro.
			br 
			| Lo so che a molti privo di decoro 
			br 
			| Apparir&#224;, gi&#224; fuori moda, e degno
			br 
			| Piuttosto d’un ancella, certo segno, 
			br 
			| confessiamolo pur senza paura,
			br 
			| di quanto s’&#232; noialtri al gusto avversi
			br 
			| nei nostri nomi (a non parlar di versi). |br
			br 
			| Credemmo conquistare la cultura,
			br 
			| e non ne abbiamo preso, in conclusione,
			br 
			| che la ricerca dell’affettazione.

Is there a better way to solve this?
(incidentally I&#39;m asking for the same thing with the image tag...)

What about Line Breaks in Jade?

**Note**: my auto answer at end of the post

I&#39;m trying to make a better experience of nodeJS and i don&#39;t really like to get all the script in one file.

so, following a post here i use this structure

    ./
     config/
       enviroment.js
       routes.js
     public/
       css/
         styles.css
       images
     views
       index
         index.jade
       section
         index.jade
       layout.jade
     app.js


My files are right now:

**app.js**

    var express = require(&#39;express&#39;);
    var app = module.exports = express.createServer();
    
    require(&#39;./config/enviroment.js&#39;)(app, express);
    require(&#39;./config/routes.js&#39;)(app);
    
    app.listen(3000);

**enviroment.js**

    module.exports = function(app, express) {
    	app.configure(function() {
    		app.use(express.logger());
    		app.use(express.static(__dirname + &#39;/public&#39;));
    		app.set(&#39;views&#39;, __dirname + &#39;/views&#39;);
    		app.set(&#39;view engine&#39;, &#39;jade&#39;); //extension of views
    
    	});
    
    	//development configuration
    	app.configure(&#39;development&#39;, function() {
    		app.use(express.errorHandler({
    			dumpExceptions: true,
    			showStack: true
    		}));
    	});
    
    	//production configuration
    	app.configure(&#39;production&#39;, function() {
    		app.use(express.errorHandler());
    	});
    
    };

**routes.js**

    module.exports = function(app) {
    
    	app.get([&#39;/&#39;,&#39;/index&#39;, &#39;/inicio&#39;], function(req, res) {
    		res.render(&#39;index/index&#39;);
    	});
    
    	app.get(&#39;/test&#39;, function(req, res) {
    		//res.render(&#39;index/index&#39;);
    	});
    
    };

**layout.jade**

    !!! 5
    html
    	head
    		link(rel=&#39;stylesheet&#39;, href=&#39;/css/style.css&#39;)
    		title Express + Jade
    	body
    		#main
    			h1 Content goes here
    			#container!= body

**index/index.jade**

    h1 algoa



The error i get is:

&gt; Error: Failed to lookup view &quot;index/index&quot;
&gt;     at Function.render (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\application.js:495:17)
&gt;     at render (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\response.js:614:9)
&gt;     at ServerResponse.render (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\response.js:638:5)
&gt;     at c:\xampp\htdocs\nodejs\buses\config\routes.js:4:7
&gt;     at callbacks (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\router\index.js:177:11)
&gt;     at param (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\router\index.js:151:11)
&gt;     at pass (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\router\index.js:158:5)
&gt;     at Router._dispatch (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\router\index.js:185:4)
&gt;     at Object.router [as handle] (c:\xampp\htdocs\nodejs\buses\node_modules\express\lib\router\index.js:45:10)
&gt;     at next (c:\xampp\htdocs\nodejs\buses\node_modules\express\node_modules\connect\lib\proto.js:191:15)

But i don&#39;t really know what is the problem...

I&#39;m starting thinking is because the modules exports...



**Answer:**
Far away the unique solution i found is to change the place i defined app.set(&#39;views&#39;) and views engine

I moved it to the app.js and now is working well.


    var express = require(&#39;express&#39;);
    var app = module.exports = express.createServer();
    
    
    require(&#39;./config/enviroment.js&#39;)(app, express);
    
    app.set(&#39;views&#39;, __dirname + &#39;/views&#39;);
    app.set(&#39;view engine&#39;, &#39;jade&#39;);
    
    require(&#39;./config/routes.js&#39;)(app);
    
    app.listen(3000);

I don&#39;t really understand the logic behind this but i gonna supose it have one.

Error: Failed to lookup view in Express

This style code worked for me a few months back.  I have updated to the latest Jade NPM package and now it is not working.  Can some please assist me with the proper way to inline a style in a Jade template?  

	doctype 5
	html(lang=&quot;en&quot;)
		head
			style(type=&#39;text/css&#39;)
			   .ui-title {
					margin: 0.6em 10% 0.8em !important;
				}

I get this error on the closing }

	unexpected text }


How to use the style tag with jade templates?

Curious if I&#39;m doing this right and if not how you guys would approach this.

I have a Jade template that needs to render some data retrieved from a MongoDB database and I also need to have access to that data inside a client side JavaScript file.

I&#39;m using Express.js and sending the data to the Jade template as follows :

    var myMongoDbObject = {name : &#39;stephen&#39;};
    res.render(&#39;home&#39;, { locals: { data : myMongoDbObject } });

Then inside of **home.jade** I can do things like :

    p Hello #{data.name}!

Which writes out : 

    Hello stephen!

Now what I want is to also have access to this data object inside a client side JS file so I can manipulate the Object on say a button click before POSTing it back to the server to update the database.

I&#39;ve been able to accomplish this by saving the &quot;data&quot; object inside a hidden input field in the Jade template and then fetching the value of that field inside my client-side JS file.

**Inside home.jade**

    - local_data = JSON.stringify(data) // data coming in from Express.js
    input(type=&#39;hidden&#39;, value=local_data)#myLocalDataObj

Then in my client side JS file I can access local_data like so :

**Inside myLocalFile.js**

    var localObj = JSON.parse($(&quot;#myLocalDataObj&quot;).val());
    console.log(localObj.name);

However this stringify / parsing business feels messy. I know I can bind the values of my data object to DOM objects in my Jade template and then fetch those values using jQuery, but I&#39;d like to have access to the actual Object that is coming back from Express in my client side JS. 

Is my solution optimal, how would you guys accomplish this?

Accessing Express.js local variables in client side JavaScript

I&#39;m trying to change the value of the input placeholder from a controller but cant quite figure out how.

    input(type=&#39;text&#39;, ng-model=&#39;inputText&#39;, side=&#39;30&#39;, placeholder=&#39;enter username&#39;)

Is there a way to modify a model&#39;s element attributes? 


Change value of input placeholder via model?

I have some text stored in a variable which contains some HTML.  For example, the &amp;lt;b&gt;cat&amp;lt;/b&gt; in the hat. However, when I render it in Jade, it shows up with the tags instead of rendering the formatting. How can I fix this?

Rendering HTML in variable using Jade

I like to put all my inline elements in a single line. 

    &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;click&lt;span&gt;here&lt;/span&gt;&lt;strong&gt;!&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;

Wondering if there&#39;s a better way to create inline elements in Jade than this:

    ul
      li 
        a(href=&quot;#&quot;) click 
          span here
          strong !

This get&#39;s a little closer but I&#39;m not sure how to add the span and strong tags without breaking the lines.

    ul
      li: a(href=&#39;#&#39;) click
        span ...

This obviously isn&#39;t a super big problem but it&#39;s a little annoying that I can&#39;t put inline elements inline. Thanks for the help

What is a concise way to create inline elements in Jade

I need to include a javascript file to webpage. I write the following:

    include /../scripts/jquery.timeago.js

but I get 

    &lt;script&gt;/*
     * timeago: a jQuery plugin, version: 0.8.2 (2010-02-16)
     * @requires jQuery v1.2.3 or later
     *
     * Timeago is a jQuery plugin that makes it easy to support automatically
     * updating fuzzy timestamps (e.g. &quot;4 minutes ago&quot; or &quot;about 1 day ago&quot;).
     *
     * For usage and examples, visit:
     * http://timeago.yarp.com/
     *
     * Licensed under the MIT:
     * http://www.opensource.org/licenses/mit-license.php
     *
     * Copyright (c) 2008-2010, Ryan McGeary (ryanonjavascript -[at]- mcgeary [*dot*] org)
     */
    (function($) {
    ....
    &lt;/script&gt;

as result. But I need:

    &lt;script src=&quot;/Scripts/jquery.timeago.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

How to do it?

All Pug Solutions on Gang of Coders

Total of 27 Pug Solutions

Loop in Jade (currently known as "Pug") template engine