How do I properly render Angular routes using the Express framework? - angularjs

Question

I have installed the express-generator package with npm and used the express myApp command to generate my app. I am having trouble working with the routes. I understand that there are Express routes, which are used for the backend stuff, and Angular routes, which are for the frontend. The problem: none of my routes besides the index are rendering. So my file structure is:
/myApp
/bin
/node_modules
/public
/images
/js
/controllers
app.js
/stylesheets
/routes
index.js
/views
error.jade
index.jade
layout.jade
about.jade
app.js
package.json
My 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 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);
// 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;
My routes/index.js:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'myApp' });
});
module.exports = router;
From what I understand, the above serves up the index and then from there the Angular routes take over and load partial templates. My Angular routes are in public/js/app.js:
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '/views/index.jade',
controller: 'IndexCtrl'
})
.when('/about', {
templateUrl: '/views/about.jade',
controller: 'AboutCtrl'
})
.otherwise({ redirectTo: '/index' });
}]);
So when I have an anchor tag link to my about page in the layout.jade template:
doctype html
html(lang='en', ng-app='myApp')
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
base(href='/')
body
header.header
h1.title MY TITLE
ul.navbar
li
a.about(href='/about') About
block content
And I load up my server and click the "about" link, I get a 404 error. In my console I see a 404 for index.jade AND for about.jade, but my home page loads the content of index.jade anyway.
I have tried changing the href in my anchor tag from /about to #/about, and then instead of giving me a 404 when I click the link, the url changes to localhost:3000/#/about but the content of the page doesn't change at all. It still shows the content of index.jade.
Also not sure if relevant, when I hit localhost:3000 in the browser it automatically adds /#/, so the full url shows http://localhost:3000/#/.
Any help will be greatly appreciated! Also please let me know if I should provide any more information/code. Thank you!

Answer 1

It looks like the routes for the views (error.jade, and about.jade) are not setup in your routes.js file. If you go to the link http://localhost:3000/views/about.jade do you see anything?