Angular NgRoute "/" 有效，但其余的无效？

Question

I have an app running on the MEAN stack, and I can't seem to get any angular route other than "/" to work. I have tried this with both ng-Route and ui-router, and both keep sending anything other than "/" (like /contacts or /portfolio_item/4) back to "/".

Here is app.js:

// using the express library in variable express
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');

// specify that app is a new express application
var app = express();
app.use('/javascripts', express.static(__dirname + '/public/javascripts'));
app.use('/images', express.static(__dirname + '/public/images'));
app.use('/stylesheets', express.static(__dirname + '/public/stylesheets'));
app.use('/pages', express.static(__dirname + '/public/pages'));
app.use('/partials', express.static(__dirname + '/views/partials'));
app.use('/portfolio.json', express.static(__dirname + 'portfolio.json'));

app.get('*', function (req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

And here is angularapp.js:

var myApp = angular.module('myportfolio', ['ngRoute'])

myApp.config(function($routeProvider){
        $routeProvider
        .when('/', {
          templateUrl: '/pages/home.html',
          controller: 'mainController'
        })
        .when('/portfolio_item/:item_number', {
          templateUrl: '/pages/item.html',
          controller: 'portfolioController'
        })
        .when('/contacts', {
          templateUrl: '/pages/contact.html',
          controller: 'contactController'
        })
        .otherwise({ redirectTo: '/' });

Regardless of what I do, both /portfolio_item/5 and /contacts keep showing me /pages/home.html... it's odd to me that only the index would work. When I removed the ".when('/', {" portion, it would just show me the layout with no view at all from any URL.

I am working on a C9 environment and running a Node server if that makes a difference?

Answer 1

If you check your browser console, you should find an error of this form:

Uncaught SyntaxError: Unexpected token <

The error occurs because the server is not serving the static files. express.static is being used as a middleware for routes on the server.

To correct this, you need to include the line:

app.use(express.static(__dirname + '/public'));

This serves all the static files in the public folder.