Angularjs 如何使用angular.js、ui router和node.js刷新路由

我有一个带有ui路由器的angularjs和nodejs应用程序，在主页上运行良好。问题是我无法刷新任何其他状态或在浏览器中键入其他状态url并直接转到它

我让NodeJ使用index.html文件响应对状态URL的请求

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

应用程序获取index.html并从index.html请求所有脚本，但出于某种原因，它会在请求前添加状态url。例如，在我的index.html标题中有以下脚本

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

编辑：我通过在链接中添加“/”修复了此问题，如：href=“/css/normalize.css”。 现在将加载索引文件，但angular不会发送与状态关联的部分文件的get请求。它只加载index.html文件

这是我的app.js文件

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('!');
}]);

这是我的节点服务器

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() {

});

---

我解决了这个问题。我用与我的客户端文件夹中的文件夹相同的名称命名了我的一些州

当我尝试刷新“相册”状态时，如下所示：

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

此节点代码将url“/albums”与我的“/client/albums”目录匹配

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

我修复了这个问题，重命名了我的文件夹，使它们与URL不匹配。这样，catchall代码发送index.html。希望这能帮助其他人

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