[英]How to get partials to show when using ui-router with expressjs?
I have a simple AngularJS app with a plunkr here . 我这里有一个带有plunkr的简单AngularJS应用。
I'd like to put the app into server running expressjs. 我想将应用程序放入运行expressjs的服务器中。 Everything seems to be working except the partials don't render and there's no error displayed.
似乎所有东西都在工作,除了不渲染局部图像,并且没有显示错误。
When I go to localhost:3000/views/base.html
I see the correct page which means it's being served correctly by express. 当我转到
localhost:3000/views/base.html
我看到正确的页面,这表示它已由express正确提供。 Clicking the links at the top of the page correctly changes the url. 单击页面顶部的链接可以正确更改URL。 The thing that makes me think it's an AngularJS issue is that the {{teams}} binding in the layout is blank, like AngularJS isn't rendering it at all.
让我认为这是AngularJS的问题是布局中的{{teams}}绑定是空白的,就像AngularJS根本没有渲染它一样。
The express directory is: express目录是:
server.js
views/
|- layout.jade
public/
|- javascripts
|- angularApp.js
|- views
|- base.html
|- check.html
routes/
|- index.js
The contents of the individual files are below. 各个文件的内容如下。
server.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 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 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 (routes) 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;
It has been a while since your original post, but I am answering in case someone else has this problem. 自您的原始帖子以来已经有一段时间了,但是如果有人遇到此问题,我会回答。 I had a similar problem, although I am using ejs instead of jade.
我有一个类似的问题,尽管我使用的是ejs而不是jade。 I moved my partials out of the views directory and into the public directory.
我将部分内容从views目录移到了公共目录。 That has resolved the issue.
这就解决了问题。
template url should just start with "/" not "../" . 模板网址应仅以“ /”开头,而不是以“ ../”开头。 Please try
请试试
templateUrl: "/views/base.html" templateUrl:“ / views / base.html”
That answer is perfect.. with Express and Angular, move your rest of the code from views folder to public folder.. That works.. 这个答案是完美的..使用Express和Angular,将其余代码从views文件夹移到public文件夹。
or the best way is add the following to your app.js 或最好的方法是将以下内容添加到您的app.js中
app.use(express.static(__dirname + '/views')); app.use(express.static(__ dirname +'/ views'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.