Using Onsen, how to write server side code in NodeJs that will render Jade files as HTML in a splitter

Question

In my Onsen app I have the following splitter. I am using Jade, and rendering all the other pages from the list items in html (despite the fact that they are in separate jade files) by including the files at the bottom of the page, as shown below:

body(ng-controller='...')
    ons-splitter(var='mySplitter')
      ons-splitter-side(var='menu' side='left' width='220px' collapse swipeable)
        ons-page
          ons-list
            ons-list-item(ng-click="root.load('home.jade')", tappable='')
            | Home
          ons-list-item(ng-click="root.load('search.jade')", tappable='')
            | Search
            ... more list items

    ons-template(id='home.jade')
      ons-page(ng-controller='...')
        ons-toolbar
        .left
          ons-toolbar-button(ng-click='mySplitter.left.open()')
            ons-icon(icon='md-menu')
        .center
          | My App

        //- google maps stuff
        ons-input#pac-input.controls(type='text', placeholder='Search Box')
        div#map.col-md-12

        ons-bottom-toolbar
          .center
          | MyApp

    include search.jade

I believe this is a dirty shortcut, and will load the contents of search.jade (as well as every other file I include) before the user even clicks the item in the splitter.

I do not want this functionality. I would like to instead have server code in NodeJs that renders the jade files in html when they are ready to be displayed to the user. Something like this:

jade.renderFile('search.jade')

This angular code is currently how I am loading the page from the item in the splitter:

mySplitter.content.load(page)
  .then(function() {
  $scope.pop = page;
  mySplitter.left.close();
});

However I am very confused about how to write this in a node route. Do I just abandon the splitter function in angular?

Can anyone help clarify this for me and show me a clear example of how to write the node route to render the jade files as html each time they are loaded?

Please see solution 1 of the selected answer from this stack overflow post for a reference of what exactly I am trying to do: stack overflow post

I am currently using solution 2 from that post.

I believe this is the relevant code in server.js:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

However when I change jade to html, I receive the error: Error: Cannot find module 'html'

All my front-end files in the views folder have .jade extensions and are written in jade.

Update Here is how I am serving index.jade (which is in the views folder) in a file called index.js:

module.exports = function(app){

  /* Get home page. */
  app.get('/', function(req, res, next) {
    res.render('index', { title: 'My App' });
  });
}

This was my old route NodeJS route which is no longer being used because of the splitter:

    // get user search page
    app.get('/user/search', function(req, res, next) {
        return res.render('searchForTrainer');
    });

Answer 1

Hmm. Since your code seems relatively small I would guess that what it does may be just serving all your files from views and actually "rendering" them. So probably you are just failing to access them properly later on. Maybe you have a url like /search.html or /search (instead of /search.jade). Could you try to confirm whether you can access such a url?

Also is your index.jade file served in some other way like startingPoint: 'index.jade' or something similar or is it also located in the views folder?

Basically as long as your index file has the same treatment as your other views then everything should be fine.

Update: With what you just provided we can see the way in which you are serving your index.

app.get('/', function(req, res, next) {
    res.render('index', { title: 'Fitness App' });
});

The equivalent of that is exactly the same as what you said you had before:

app.get('/user/search', function(req, res, next) {
    return res.render('searchForTrainer');
});

Here res.render is what converts your jade into html and then returns it to the client. Since the splitter is expecting html that means you shouldn't have made changes to the server when you started using it.

Here is how the process looks like:

       Client          |        HTTP         |      Server
                       |                     |
 content.load('page')  →     GET /page       ↘ 
                       |                     | res.render('page') // convert jade to html
   html is loaded      ← 200 OK html content ↙
 in splitter.content   |                     |

TL;DR - if you use your old route everything should be fine. Just remember to change the page url in the splitter from search.jade to /user/search (or whatever the url for will be).