如何使用angular.js，ui-router和node.js刷新路由

Question

I have an angularjs and nodejs app with ui-router that works well from the home page. The problem is I cannot refresh any other state or type another state url in the browser and go directly to it.

I have nodejs respond to requests for the state urls with the index.html file

app.get('/*', function (req, res) {
  res.sendfile('client/index.html');
});

The app gets index.html and requests all the scripts from index.html but for some reason it adds the state url in front of the request. For instance in my index.html header there is this script

<link href="css/normalize.css" rel="stylesheet">

If I refresh the browser from a state other than home, then the script is requested like this:

GET /albums/css/normalize.css

edit: I fixed this problem ^^ by adding a '/' in the link like so: href="/css/normalize.css". Now the index file loads but angular does not send a get request for the partial file associated with the state. It only loads the index.html file.

This is my app.js file for angular

angular.module('myApp', [
    'ngTouch',
    'ui.router',
    'ngRoute',
    'ngAnimate',
    'myApp.controllers',
    'myApp.directives',
    'myApp.restServices',
    'ui.bootstrap',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'snap',
    'angular.css.injector'
]).
config(['$stateProvider', '$httpProvider', '$urlRouterProvider', '$locationProvider','snapRemoteProvider',  function ($stateProvider, $httpProvider, $urlRouterProvider, $locationProvider, snapRemoteProvider) {
    snapRemoteProvider.globalOptions.disable = 'right';
    $httpProvider.interceptors.push('authInterceptor');
    $urlRouterProvider.otherwise("home");

    $stateProvider
      .state('home', {url: "/",templateUrl: "partials/home.html",controller: 'homeCtrl'})
      .state('albums', {url: "/albums",templateUrl: "partials/albums/albums.html",controller: 'albumsCtrl'})

.config(['$locationProvider', function ($locationProvider) {
  $locationProvider.html5Mode(true);
  $locationProvider.hashPrefix('!');
}]);

This is my node server

var express = require('express'),
    url = require('url');
    path = require('path'),
    bodyParser = require('body-parser'),
    directory = require('./routes/directory'),
    app = express();

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://curtwphillips.com');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Accept, X-api-key, X-auth-token, Content-Type, Content-Length');
    res.setHeader('Access-Control-Allow-Credentials', true);
    if (req.headers && req.headers.authorization) { delete req.headers.authorization; }
    next();
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, '/client')));
app.use(function(req, res, next){
  console.log('%s %s', req.method, req.url);
  next();
});

app.get('/*', function (req, res) {
  res.sendfile('client/index.html');
});


app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function() {

});

Answer 1

I figured out the problem. I was naming some of my states with the same names as folders in my client folder.

When I tried to refresh the 'albums' state, shown here:

.state('albums', {url: "/albums",templateUrl: "partials/albums/albums.html",controller: 'albumsCtrl'})

the url "/albums" was matched to my "/client/albums" directory by this node code

app.use(express.static(path.join(__dirname, '/client')));

I fixed the issue by renaming my folders so they don't match the angular urls. This way the catchall code sends index.html. Hopefully this helps someone out there.