javascript - express 4.0 后端 API 上的 Angularjs 路由

Question

我已经启动了一个使用 Express 4.0 服务器的应用程序。我已经根据 scotch.io ( http://scotch.io/tutorials/javascript/build-a-restful-api-using-node-and-express-4 ) 上的教程设置了路由，构建了一个后端 api 来服务于前端 SPA (angularjs)。这是后端路由器的摘录:

router.route('/users')
   .get(function (req, res) {
       User.find(function(err, users) {
          if (err) {
             res.send(err);
          }
          else {
             res.json(users);
          }
       });
   })

再往下

// home page route (http://localhost:8080)
router.get('/', function(req, res) {
   res.send('API ROOT');    
});

app.use('/api', router);

在前端，我只使用 get 从 api 获取用户:

$http.get('/api/users')
    .success(function(data) {
        $scope.users = data;
});

Angular 路线设置如下:

.when('/', {
    templateUrl: 'views/home.html',
    controller: 'MainController'
})

.when('/users', {
    templateUrl: 'views/user.html',
    controller: 'UserController'
})

index.html 有一个指向/users 的链接。

当启动服务器并进入 localhost:8080 时，它加载正常，单击用户加载 user.html View 并列出用户。

但是，如果我在浏览器位于 localhost:8080/users 时单击刷新

我得到:

Cannot get /users

是 Controller 的问题吗？还是后端路由的问题？

我们非常欢迎任何反馈/建议!

再搜索一些，我发现有几种解决方案可以解决这个问题:在前端( Angular 路线部分)将其添加到末尾:

// >>> redirect other routes to
otherwise({
    redirectTo: '/'
});

或者在后端(在所有路由之后):

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

哪种解决方案更好(或者是否建议同时使用这两种...？)

Answer 1

你应该同时使用两者。

您需要为您的快速应用程序提供一个包罗万象/通配符的路由，以便任何未明确匹配的路由都将返回索引页面，该页面将加载 Angular 并允许您的 Angular 路由接管。请注意，这应该始终是您的最后一条路线(它们按顺序解析)。

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

然后在您的 Angular 应用程序中，您应该有一个默认路由来捕获客户端上任何不匹配的路由。如果应用程序已加载但遇到未知路由，则此路由将生效，而上述服务器端解决方案将处理任何直接请求。

function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'home.html',
        controller: 'homeCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);