Bondifrench Bondifrench - 2 months ago 19
AngularJS Question

Angular-ui router loading jade template

I'm trying to combine Express with Angular and notably Angular-UI Router and use Jade:
My index.jade looks like this:

doctype html
html(lang="en")
head
meta(charset='UTF-8')
meta(name='fragment', content='!')
base(href='/')
title Node Express Angular Example
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='stylesheet', href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')
link(rel='stylesheet', href='./css/style.css')
body(style='', ng-app='myApp', ng-cloak)
include partials/header
div(ui-view)

script(src='//code.jquery.com/jquery-2.1.1.min.js')
script(src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js')
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js')
script(src='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js')
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.js')
script(src='./js/app.js')


My app.js looks like this:

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$stateProvider','$urlRouterProvider','$locationProvider',
function ($stateProvider,$urlRouterProvider,$locationProvider) {
$stateProvider
.state('home', {
url:'/home',
templateUrl: './partials/partial-home.jade'
})
.state('about', {
url:'/about',
template: 'This is the about page'
});
$urlRouterProvider.otherwise('/home');
$locationProvider
.html5Mode(true)
.hashPrefix('!');
}]);


And my partial-home.jade looks like this:

div.jumbotron
div.container.text-center
h1 Home Page
p This page is a draft in progress


I don't have a problem viewing the 'About' page, but I can not view the Home page.
I tried also to replace div(ui-view) with
<div ui-view></div>
in index.jade as was suggested in some other SO post but to no effect. Any clues?

Edit: There was a spelling mistake in app.js, it's templateUrl instead of templateURL. However it still does not render the proper partial-home.jade, what comes inside the ui-view is actually the same as index.jade. My server.js looks like this:

var express = require('express');
var app = express();
var port = process.env.PORT || 8080;
var favicon = require('serve-favicon');
var path = require('path');

app.set('views', __dirname+'/client/views');
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'client')));

app.get("/*", function (req, res) {
console.log(req.url + req.method);
res.render('index');
});

app.listen(port, function () {
console.log('Express Server listening on ' + port);
});

Answer

Right so express doesn't auto-render views. It will automatically send static files, but not render dynamic views, you so need an explicit route to match the partials and call res.render to convert them from jade to HTML before sending to the browser. Try something along these lines, putting this BEFORE your wildcard route for index.

app.use("/partials", function (req, res) {
  res.render(req.path);
});
Comments