玉模板不会用 ui-router 动态参数渲染

Question

我正在使用 express 4 为 angular 渲染翡翠模板。当我尝试在客户端使用动态参数进行路由时，我的路由不匹配，因此 express 发送了两次 layout.jade。

app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'views/home',
            controller: 'MainCtrl'
        })
        .state('about', {
            // works fine
            url: '/about',
            templateUrl: 'views/about'
        })
        .state('post', {
            url: '/post/{id}',
            // view does not render
            templateUrl: 'views/post',
            controller: 'PostCtrl'
        });

    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
})

因为当我点击http://localhost:3000/post/0 时，请求会发送到Request URL:http://localhost:3000/post/views/post，它不匹配任何内容。

我想在点击/post/{id}时渲染public/views/post.jade

这些是快速的 4 条路线和配置：

app.set('views', path.join(config.rootPath, '/views'));
app.set('view engine', 'jade')

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(config.rootPath, 'public')));

app.get('/views/:name', function(req, res){
   res.render('../public/views/' + req.params.name);
})

app.get('*', function(req, res){
    res.render('layout');
});

注意 如果我将帖子状态更改为使用模板：

  .state('post', {
        url: '/post/{id}',
        template: '<div>{{ post }}</div> is that',
        controller: 'PostCtrl'
  });

模板会渲染得很好。问题是当我使用templateUrl: 'views/post'

更新：

从主页视图中，我可以通过以下方式导航查看post.jade：

div(ng-repeat='post in posts track by $index') a(ui-sref='post({ id:{{ $index }} })') Comments

导航到views/post 好吧，但是如果我刷新页面，我会得到相同的布局布局错误

Answer 1

（我假设config.rootPath 是您项目的根目录。您应该查看http://nodejs.org/docs/latest/api/globals.html#globals_dirname）

首先，如果您的所有视图都在目录{config.rootPath}/public/views 中，则此行：

app.set('views', path.join(config.rootPath, '/views'));

基本上是告诉 Express 在{config.rootPath}/views 中查找您的玉文件，这不是正确的位置。试试：

app.set('views', path.join(config.rootPath, 'public', 'views'));

这将允许您在要渲染玉文件时仅指定相对于 public/views 的路径 - 所以在事物的角度方面，如果您想在点击 /post/{id} 时渲染 public/views/post.jade，它只会是：

.state('post', {
    url: '/post/{id}',
    templateUrl: '/post',
    controller: 'PostCtrl'
})

在后端，加载视图看起来就像

app.get('/:name', function(req, res){
    res.render(req.params.name);
})

（注意：将参数作为路径的基础并不是最好的主意。您希望为您的部分创建一个目录public/views/partials，而不是'/:name' - 这会拦截几乎所有内容- 你会使用'/partials/:name')