Angular：重新加载/URL导航恢复到默认路由

Question

我将 Angular 1.3.10、ui-router 0.2.10 和 Express 4.14.0 用于基本的 Reddit 克隆，但在路由方面遇到了问题。

我的（缩写）特快路线：

router.get('/api/home', function (req, res, next) {
  res.render('index', {
    title: 'Meanit'
  });
});

router.get('*', function (req, res, next) {
  res.redirect('/api/home');
});

我的 Angular 状态配置：

app.config([
  '$stateProvider',
  '$urlRouterProvider',
  '$locationProvider',
  function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: '/views/home.html',
        controller: 'MainCtrl',
        resolve: {
          postPromise: [
            'posts',
            function (posts) {
              return posts.getAllPosts();
            }
          ]
        }                      
      })
      .state('posts', {
        url: '/posts/{id}',
        templateUrl: '/views/posts.html',
        controller: 'PostsCtrl',
        resolve: {
          post: [
            '$stateParams',
            'posts',
            function ($stateParams, posts) {
              return posts.getPost($stateParams.id);
            }
          ]
        }
      })
      .state('register', {
        url: '/register',
        templateUrl: '/views/register.html',
        controller: 'AuthCtrl',
        onEnter: [
          '$state',
          'auth',
          function ($state, auth) {
            if (auth.isLoggedIn())
              $state.go('home')
          }
        ]
      })
      .state('login', {
        url: '/login',
        templateUrl: '/views/login.html',
        controller: 'AuthCtrl',
        onEnter: [
          '$state',
          'auth',
          function ($state, auth) {
            if (auth.isLoggedIn())
              $state.go('home')
          }
        ]
      });

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('home');
  }
]);

我的文件夹层次结构如下所示：

meanit
  public
    js
      app.js (Angular)
  routes
    index.js (Express routes)
  views (Angular templates)
    index.html
    home.html
    posts.html
    register.html
    login.html
  server.js

所有路由都按预期工作，但是当我在其中一个路由上重新加载页面或直接导航到路由 URL (/posts/579d17934b0f5f6b2ff5c72c) 时，我首先通过 Express 重定向到 /api/home（预期，我认为），然后通过 Angular 而不是 /posts/579d17934b0f5f6b2ff5c72c 路线（不打算）到达 /home。

如何强制 URL 导航/重新加载停留在子路由上？

（我查看了AngularJS. Retain state after page reload，但我不明白如何设置 URL 解析/如何根据接受的答案调整代码以适合我的项目。）

Answer 1

当我开始我的一个 angularjs 项目时，我遇到了类似的问题。就我而言，我运行了 2 个不同的服务器；一个用于 API，另一个专用于提供静态文件。这是我的快速静态服务器的样子：

server.js

//server.js

var express = require('express');

var app = express();

//use very specific paths to the different resource folders
app.use('/js', express.static('public/js'));
app.use('/css', express.static('public/css'));
app.use('/img', express.static('public/img'));
app.use('/views', express.static('public/views'));
app.use('/bower_components', express.static('public/bower_components'));

var port = process.env.PORT || 80;
var staticExtensions = ['css','js','png','gif','jpg','woff','woff2','ttf','map'];
var deeperPaths = ['/posts']; //an array of deeper paths that need special treatment

//cater specifically for post, since it's deeper than other paths (relative to the other assets /css, /js etc)
app.get('/posts/:postId', function(req,res){
    console.log('fetching matched request: '+ req.path + '...');
    res.sendFile(__dirname +'/public/index.html');
});

//any other request returns the index.html file, where angularjs routing takes over
app.get('*', function(req, res) {
    console.log('fetching '+ req.path + '...');
    var filePath = __dirname +'/public/index.html';

    var requestPath = req.path.split('?')[0];
    var fileExtension = requestPath.split('.').pop();
    //if it's a static resource make relative to /public
    if(staticExtensions.lastIndexOf(fileExtension)>-1){
        deeperPaths.forEach(function(path, index){   
           //this is not a very reliable test, but it works for now  
           if(req.path.indexOf(path)===0){
               filePath = __dirname + '/public' + req.path.replace(path, '');
            }
        });
    }
    res.sendFile(filePath); // load our public/index.html file
});

// START THE SERVER
app.listen(port);
console.log('Website started on port ' + port);

希望这会有所帮助...

Answer 2

看来您的问题与快递有关。您的全部内容正在执行 res.redirect()，我认为它会更新浏览器 url。我建议你只做一个简单的 sendfile() 或 render()，而不是 redirect()。

您的快速服务器总括路由应更改为：

//This is assuming the index.html file exists on the same directory the server is launched from
router.get('*', function (req, res, next) {
    res.render('index', {
        title: 'Meanit'
    });
});