Angular-ui 路由器加载玉石模板 [英] Angular-ui router loading jade template

问题描述

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

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

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

我的部分 home.jade 看起来像这样:

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

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

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?

app.js 中有一个拼写错误，它是 templateUrl 而不是 templateURL.但是它仍然没有渲染正确的 partial-home.jade，ui-view 里面的东西实际上和 index.jade 是一样的.我的 server.js 看起来像这样:

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

推荐答案

所以 express 不会自动呈现视图.它会自动发送静态文件，但不会渲染动态视图，因此您需要一个显式路由来匹配部分并调用 res.render 在发送到浏览器之前将它们从 jade 转换为 HTML.沿着这些方向尝试一些东西，把它放在 index 的通配符路由之前.

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

这篇关于Angular-ui 路由器加载玉石模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！