问题描述:

I'm using node.js, express and angular.js to make a personal blog. There is a link on the index page: <a href="/">Home</a>. (It's in the layout.jade file as follows)

Everything is fine when I loaded the index page using the address http://localhost:8000/, ng-view loaded my contents correctly. But when I clicked the Home link, all the contents in ng-view just disappeared, I've been digging for a long time, but still couldn't figure out why.

My codes are as follows.


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 (this is express routes, not 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

网友答案:

You could try replacing the href attribute from the element with ng-href.

<a href = "http://localhost:8000/"> Home </a>

to

<a ng-href="#/"> Home </a>

I think this will fix your problem.

and if you still having the same problem you could do a trick to make it possible by changing your routes.js as follows,

angular.module('blogApp', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      })
      .otherwise('/');
  }]);

then try with any link in href ;)

网友答案:

Match your href for your home link to your actual local host url.

`<a href = "http://localhost:8000/"> Home </a>
相关阅读:
Top