Angular 路由结果为 404 - 无法获取

Question

我正在尝试使用 angulars ui-router 设置 urls 以便我可以去一个基地 url 或者去一个相同的基地 url + 参数。所以 - 我可以转到 /test 或 /test/1，它将转到同一页面 - 唯一的区别是 url 参数。所以到目前为止我有这个：

 .state('test', {
    url: '/test',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
})
.state('testState', {
    url: '/test/:id',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
});

/test 似乎工作正常，但是当我输入 test/1 时，它显示 cannot GET。这是因为我手动输入 url 而不是使用 ui-路由器内部链接 (ui-sref)。我这样说是因为我注意到当我输入 /test 时，结果也是一样的。但是，当我使用通过 ui-sref 设置的页面上的链接时，测试和主页点击工作正常。我希望能够为 test/:id 共享 URL，因为这将是一个网络应用程序，登录的人可以在其中共享链接。

此外 - 是否有更好的方法将 test 和 testState 设置为 1 个状态？谢谢！

Answer 1

您的问题不在 Angular 端，而是您的服务器（我根据响应措辞猜测的节点）。 Node/express/whatever 不知道 test/1 的服务器文件。尝试放宽您的路由方案。我的意思是，设置代码以便对 test* 的任何请求解析为与 test/ 相同的文件。这是 Express 应用程序中的示例：

/**
 * For any GET that we can't resolve to a static file, assume it's 
 * an attempt to go to an angular route
 */
app.get('*', function(req, res){
  res.sendfile(path_to_indexfile);
});

更新（讨论后）：

或者你可以关闭 html5 模式——这样你就不用担心告诉你的服务器如何处理 /test/1--angular 将使用 /test/#!/1 这应该不会引起问题。

Answer 2

有两种选择，使用一种状态“/test/:id”然后参数是可选的你可以调用/test/1或/test/。

如果你想启用 /test 你将需要另一个状态。

这是一个包含所有选项的 Plunker，有效。正如 AlexMA 提到的那样，您似乎没有 post 有问题的代码，所以我无法修复您的示例。

此配置符合您的要求：

.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('view', {
            url: '/view/:inboxId',
            templateUrl: 'tpl.view.html',
            controller: 'viewCtrl'
        }).

        state('view_root', {
            url: '/view',
            templateUrl: 'tpl.view.html',
            controller: 'viewCtrl'
        })

})
.controller('viewCtrl', function($scope, $state, $stateParams) {
  $scope.state = $state.current;
  $scope.params = $stateParams;
})

Angular 路由结果为 404 - 无法获取

Angular route results in 404 - cannot GET

javascript

angularjs

angular-ui-router