在帶有express.js的ui-router時如何顯示局部信息？

Question

我這里有一個帶有plunkr的簡單AngularJS應用。

我想將應用程序放入運行expressjs的服務器中。 似乎所有東西都在工作，除了不渲染局部圖像，並且沒有顯示錯誤。

當我轉到localhost:3000/views/base.html我看到正確的頁面，這表示它已由express正確提供。 單擊頁面頂部的鏈接可以正確更改URL。 讓我認為這是AngularJS的問題是布局中的{{teams}}綁定是空白的，就像AngularJS根本沒有渲染它一樣。

express目錄是：

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;

Answer 1

自您的原始帖子以來已經有一段時間了，但是如果有人遇到此問題，我會回答。 我有一個類似的問題，盡管我使用的是ejs而不是jade。 我將部分內容從views目錄移到了公共目錄。 這就解決了問題。

Answer 2

模板網址應僅以“ /”開頭，而不是以“ ../”開頭。 請試試

templateUrl：“ / views / base.html”

Answer 3

這個答案是完美的..使用Express和Angular，將其余代碼從views文件夾移到public文件夾。

或最好的方法是將以下內容添加到您的app.js中

app.use（express.static（__ dirname +'/ views'））;