Question

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

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

当我转到localhost:3000/views/base.html时，我看到正确的页面，这意味着它正在通过快递正确提供。单击页面顶部的链接可以正确更改网址。让我觉得它是一个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;

Answer 1

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

Answer 2

模板网址应该以“/”而不是“../”开头。请尝试

templateUrl：“/ views / base.html”

Answer 3

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

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

app.use（express.static（__ dirname +＆＃39; / views＆＃39;））;

如何在使用带快递的ui-router时显示部分内容？

3 个答案: