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);
});

回答1:

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);
});

回答2:

my 2 cents: Why is it necessary for you to have the server render the page? If the reason is that you need to pass in data on initial load (thinking like a JSON string somewhere, something like this), I would do it on bootstrapping (a follow up from the same author on how to go about that).

Barring that reason, I can't really think of any other reason to have the server do the rendering. Compile your jade templates with gulp or better yet in webpack (HTMLWebpack plugin for the landing page is nice).

来源：https://stackoverflow.com/questions/23989483/angular-ui-router-loading-jade-template

标签

angularjs

express

pug

angular-ui-router