Index page changed after clicking on the "Home" link
I am using node.js, express and angular.js to create a personal blog. On the index page there is a link: <a href="/">Home</a>
. (It's in your layout.jade file as follows)
Everything is fine, when I loaded the index page using the url http://localhost:8000/
, ng-view
loaded my content correctly. But when I clicked the link Home
, all the content in ng-view
just disappeared, I dug 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 (these are 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
source to share
You can try replacing the href attribute with an element using 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 have the same problem you can do a trick to make it possible by modifying routes.js like this:
angular.module('blogApp', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/index',
controller: IndexCtrl
})
.otherwise('/');
}]);
then try with any link in href;)
source to share