我正在使用 node.js、express 和 angular.js 制作个人博客。索引页上有一个链接:<a href="/">Home</a>
. (在layout.jade文件中如下)
当我使用地址 http://localhost:8000/
加载索引页时一切正常, ng-view
正确加载我的内容。但是当我点击 Home
链接,所有内容在ng-view
只是消失了,我已经挖掘了很长时间,但仍然无法弄清楚原因。
我的代码如下。
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var api = require('./routes/api');
var fs = require('fs');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/api', api);
app.get('/partials/:name', function (req, res) {
var name = req.params.name;
//res.render('partials/' + name);
res.render('partials/' + name);
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// 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;
routes/index.js(这是快速路由,不是 angular.js)
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'My Blog' });
});
module.exports = router;
routes.js (angular.js)
angular.module('blogApp', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/index',
controller: IndexCtrl
});
}]);
index.jade
extends layout
block content
#main
#content
.ng-view
#side
...(omitted)
block scripts
link(rel='stylesheet', type='text/css', href='/stylesheets/index.css')
layout.jade
doctype html
html(ng-app='blogApp')
head
title=title
base(href='/')
link(rel='stylesheet', type='text/css', href='/stylesheets/vendors/bootstrap.min.css')
link(rel='stylesheet', type='text/css', href='/stylesheets/vendors/bootstrap-theme.css')
link(rel='stylesheet', type='text/css', href='/stylesheets/layout.css')
script(src='/javascripts/vendors/jquery-1.11.3.min.js')
script(src='/javascripts/vendors/jquery.form.js')
script(src='/javascripts/vendors/angular.js')
script(src='/javascripts/vendors/angular-route.js')
script(src='/javascripts/vendors/bootstrap.js')
script(src='/javascripts/vendors/satellizer.js')
script(src='/javascripts/views/login.js')
script(src='/javascripts/angular/controllers.js')
script(src='/javascripts/angular/routes.js')
body
#container
hgroup.header
h1 My Blog
#menu
ul
li
a(href='/') Home //Here is the link
li.nav-login
a(href='login') Login
block content
block scripts
最佳答案
您可以尝试用 ng-href 替换元素中的 href 属性。
<a href = "http://localhost:8000/"> Home </a>
到
<a ng-href="#/"> Home </a>
我认为这会解决您的问题。
如果你仍然遇到同样的问题,你可以通过改变你的 routes.js 来实现它,如下所示,
angular.module('blogApp', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/index',
controller: IndexCtrl
})
.otherwise('/');
}]);
然后尝试 href 中的任何链接 ;)
关于javascript - 单击 "Home"链接后索引页发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31578870/