将ui-router与expressjs一起使用时如何显示部分内容？答案

【问题标题】：How to get partials to show when using ui-router with expressjs?将ui-router与expressjs一起使用时如何显示部分内容？
【发布时间】：2015-01-16 08:29:11
【问题描述】：

我有一个带有 plunkr here 的简单 AngularJS 应用程序。

我想将应用程序放入运行 expressjs 的服务器中。一切似乎都在工作，除了部分不渲染并且没有显示错误。

当我转到localhost:3000/views/base.html 时，我看到了正确的页面，这意味着它正在被快递正确地送达。单击页面顶部的链接会正确更改 url。让我认为这是 AngularJS 问题的原因是布局中的 {{teams}} 绑定是空白的，就像 AngularJS 根本没有渲染它一样。

快递目录为：

server.js
views/
 |- layout.jade
public/
 |- javascripts
  |- angularApp.js
 |- views
  |- base.html
  |- check.html
routes/
 |- index.js

各个文件的内容如下。

server.js

// includes

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

var routes = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

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


app.use('/', routes);

// error handlers
// this is all

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

angularApp.js

var app = angular.module('myApp', ['ui.router'])
  .config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
      $stateProvider
        .state('home', {
          url: '/',
          templateUrl: "../views/base.html",
          controller: "MainCtrl"
        })
        .state('check', {
            url: '/check',
            templateUrl: "../views/check.html",
            controller: "CheckCtrl"
        });

      $urlRouterProvider.otherwise('/');

    }
  ])
  .controller('MainCtrl', ['$scope', function($scope){
    $scope.teams = "this is main";
  }])
  .controller('CheckCtrl', ['$scope', function($scope){
    $scope.teams = "this is check"
  }]);

layout.jade

doctype html(lang='en')
html
  //- linked stylesheets, works fine
  include ./partials/head.jade

  body(ng-app='myApp')
    nav#big-bar.navbar(role='navigation')
      .container-fluid
        .navbar-header
          a(ui-sref='home')
            p.brand.navbar-brand Site.com

        div
          ul.nav.navbar-nav                       
            li#check
              a(ui-sref='check') Check

    .mid
      p  title here? {{teams}}
      h2= title 

      div(ui-view)

    //- linked js, no missing stuff errors
    include ./partials/scripts.jade

index.js（路由）

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('layout', {title: 'Register or something'});
});

module.exports = router;

【问题讨论】：

标签： javascript angularjs node.js express

【解决方案1】：

您的原始帖子已经有一段时间了，但我正在回答以防其他人遇到此问题。我有一个类似的问题，虽然我使用的是 ejs 而不是玉。我将我的部分移出视图目录并进入公共目录。这已经解决了这个问题。

【讨论】：

【解决方案2】：

模板 url 应该以 "/" 而不是 "../" 开头。请尝试

templateUrl: "/views/base.html"

【讨论】：

没有骰子。这似乎没有任何改变。

【解决方案3】：

这个答案是完美的.. 使用 Express 和 Angular，将其余代码从视图文件夹移动到公用文件夹.. 有效..

或者最好的方法是将以下内容添加到您的 app.js

app.use(express.static(__dirname + '/views'));

【讨论】：