Whenever I load a page on my dev site with url of form localhost:8000/news everything loads correctly. However if I add a trailing slash, like so: localhost:8000/news/ the site freezes. I can see that it is attempting to load a partial with path /news/partials/footer and some others. It is trying to load the partials that the home page uses but with a bad path. I don't know why this freezes Chrome, but it does.
I've been trying for hours to figure out what's going on with this, but can't seem to get my head around why this happens. Here's the code I'm using (taking out some parts which, I promise, are irrelevant):
app.js:
var app = module.exports = express();
// Configuration
app.configure(function() {
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(__dirname + '/public'));
app.use(app.router);
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
var galleryProvider = new GalleryProvider();
galleryProvider.client.open(function(err, result) {
galleryProvider.client.authenticate('user', 'pass', function(err, result) {
if (!err) {
console.log('Mongo connected. Listening on port ' + (process.env.PORT || 8000));
app.listen(process.env.PORT || 8000);
} else {
console.log(err);
}
});
});
// Routes
app.get('/', routes.index);
app.get('partials/:name', routes.partials);
/* some backend routes that the page does not look at */
app.get('*', routes.index);
routes/index.js
/*
* GET home page.
*/
//get correct directory path
var filePath = __dirname.replace('routes', 'views/');
exports.index = function(req, res) {
res.sendfile(filePath + 'index.html');
};
exports.partials = function (req, res) {
var name = req.params.name;
res.sendfile(filePath + 'partials/' + name + '.html');
};
public/js/app.js
// Declare app level module which depends on filters, and services
var lscGallery = angular.module('lscGallery', []);
lscGallery
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {templateUrl: 'partials/home', controller: 'AppCtrl'});
$routeProvider.when('/artists', {templateUrl: 'partials/artists', controller: 'GalleryCtrl'});
$routeProvider.when('/exhibitions', {templateUrl: 'partials/exhibitions', controller: 'GalleryCtrl'});
$routeProvider.when('/news', {templateUrl: 'partials/news'});
$routeProvider.when('/about', {templateUrl: 'partials/about'});
$routeProvider.when('/contact', {templateUrl: 'partials/contact'});
$routeProvider.when('/admin', {templateUrl: 'partials/login'});
$routeProvider.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
Thank you!
P.S. If it helps, I'm using this as a seed for my site.
I figured it out. I think it took sitting outside on a nice day to get some clarity.
The partial routes were still set as relative paths in my directives (e.g. templateUrl: 'partials/gallery') even though I wanted to always be pulling partials from the root url. Silly me.