CODEWITHSUNDEEP
javascriptnode.jspugng-view
David
David

Reputation: 965

Unable to render jade inside ng-view

I am unable to render Jade when inside ng-view. Outside of ng-view the rendering of jade works just as exprected.

My guess is that I have to add a new route to render the content of home.jade, but that does not seem to work.

Do you have any suggestions on how to fix this issue?

Express routing

router.route('/')
    .get(function(req, res) {
        res.render(path.join(__dirname, '../views/', 'index'));
        // res.render(path.join(__dirname, '../views/partials', 'home'));
    });

layout.jade

doctype html
html(ng-app="myapp", lang="nl")
    head
        meta(charset="utf-8")
        meta(name="viewport", content="width=device-width, initial-scale=1") 
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css')
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css')
        title MyApp
    body
    block content

    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js')
    script(src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js')
    script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.js")
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js')
    script(src='/javascripts/app.js')
    script(src='/javascripts/my.js')

index.jade

extends layout

block content
    div#wrapper.container-fluid
    div#header.row-fluid
        h1 Document Heading
    div#nav.row-fluid
        ul.nav.nav-pills#top-nav
            li(role='presentation')
                a(href='/') Home
            li(role='presentation') 
                a(href='/about') About
            li(role='presentation') 
                a(href='/api-tester') API-tester
    div.row-fluid
        div#sidebar.col-md-2.hidden-xs
            h2 Column 2
            p Lorem ipsum dolor sit amet
            ul.nav.nav-pills.nav-stacked
                li(role='presentation') 
                    a(href='#') Link1
                li(role='presentation') 
                    a(href='#') Link2            
        div#main.col-md-10(ng-view)
    div#footer.row-fluid
        p Footer

partials/home.jade --> does not render

h1 Home

Result:

enter image description here

EDIT:

I have added a new route, but it still does not render

router.route('/partials/:name')
    .get(function (req, res) { 
        var name = req.params.name;
        res.render(path.join(__dirname, '../views/partials/', name));
    }
);

Upvotes: 0

Views: 123

Answers (1)

leon
leon

Reputation: 143

My guess is that I have to add a new route to render the content of home.jade, but that does not seem to work.

Well your guess is right. You need to add a new route to render your .jade partials. Take a look at this answer: https://stackoverflow.com/a/18747341/3130006

Upvotes: 1

Related Questions