Angular-ui路由器加载jade模板

Question

Angular-ui路由器加载jade模板

3

我将尝试将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

我的问题不是无法查看“关于”页面，而是无法查看主页。我也尝试将index.jade中的div(ui-view)替换为<div ui-view></div>，正如其他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);
});

- Bondifrench

我认为这应该在服务器端进行配置。如果我没有完全错的话，应该是服务器端渲染jade模板。当服务器传递jade模板时，它应该会直接渲染它，对吧？ - Pablo Jomer

在浏览器开发者工具的网络选项卡中查看 ./partials/partial-home.jade 模板加载时的响应。它是真正的渲染后的 HTML 还是仍然是原始的 Jade 语法？ - Peter Lyons

我发现我的第一个错误是拼写错误：应该是templateUrl而不是templateURL。现在似乎它重新加载了整个index.jade到ui-view中，但仍然没有partial-home.jade，我相信这是由于Express服务器端定义的路由问题，我会相应地修改我的问题。 - Bondifrench

@PeterLyons 对于 ./partials/partial-home.jade，我的状态码是200，响应内容是HTML，但响应看起来像是 index.jade 而不是 partial-home.jade。 - Bondifrench

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wojtek Augustynski · Answer 1

我的两个观点：为什么需要让服务器渲染页面呢？如果原因是您需要在初始加载时传递数据（类似于 JSON 字符串，像这样的内容），我会在引导过程中执行它（同一作者的后续步骤）。

除此之外，我真的想不到其他任何理由让服务器进行渲染。使用 gulp 或更好地使用 webpack 编译您的 Jade 模板（HTMLWebpack 适用于落地页很不错）。

- Peter Lyons · Answer 2

对的，Express不会自动渲染视图。它会自动发送静态文件，但不会渲染动态视图，因此您需要显式路由来匹配部分视图并调用res.render将它们从Jade转换为HTML，然后再发送到浏览器。尝试按照以下方式进行操作，在index的通配符路由之前放置这些代码。

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