angularjs - Angular-ui路由器加载jade模板

Question

我正在尝试将 Express 与 Angular 结合使用，尤其是 Angular-UI Router 并使用 Jade:我的 index.jade 看起来像这样:

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')

我的 app.js 看起来像这样:

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('!');
}]);

我的 partial-home.jade 看起来像这样:

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

我在查看“关于”页面时没有问题，但无法查看主页。我还尝试用 <div ui-view></div> 替换 div(ui-view)在 index.jade 中，正如其他一些 SO 帖子中所建议的那样，但没有效果。有什么线索吗？

编辑:app.js 中有一个拼写错误，它是 templateUrl 而不是 templateURL。然而，它仍然没有呈现正确的 partial-home.jade，ui-view 中的内容实际上与 index.jade 相同。我的 server.js 看起来像这样:

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 1

没错，express 不会自动渲染 View 。它会自动发送静态文件，但不会呈现动态 View ，因此您需要一个显式路由来匹配部分文件并调用 res.render 将它们从 jade 转换为 HTML，然后再发送到浏览器。按照这些思路尝试一些东西，将其放在 index 的通配符路径之前。

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