我应该如何使用 Angular UI 路由器？

Question

我在互联网上搜索了几天，但找不到我要找的东西。

我正在使用 angularjs 构建一个 SPA，但我正在努力解决我认为应该非常基本的事情。来自ASP.NET MVC 的心态，我正在尝试设置用于列出数据和创建新数据的路线，例如：

.state('placements', {
    abstract: true,
    url: '/placements',
    template: '<div ui-view></div>'
})
.state('placements.list', {
    url: '',
    templateUrl: mapPathToViews('placements.list'),
    controller: 'PlacementController'
})
.state('placements.new', {
    url: '/new',
    templateUrl: mapPathToViews('placements.new'),
    controller: 'PlacementController'
})

因此，设置了这些状态后，我认为导航到 /placements/new 会给我“新展示位置”视图。

如果我使用 ui-sref 导航，这将非常有效

问题来自当我在浏览器中输入myapp.com/placements/new 并点击 GO 时，根本没有匹配到任何路由。但是，如果我转到myapp.com/placements，我会看到预期的正确视图。

我的问题是：我认为应该如何设置路由器是否正确，或者我是否需要为新的展示位置设置一个完全独立的状态，例如myapp.com/newplacement？

更新

这似乎与 ui-router 在第一页加载时计算状态的方式有关。如果我加载带有 url myapp.com/placements/new 的页面，然后单击指向带有 '/' 的 url 状态的导航项（意思是主页，对吗？）然后 url 变为 myapp.com/placements/ 和视图主页被渲染。同样，如果我单击另一个指向 '/somewhereelse' 的导航链接，则 url 变为 myapp.com/placements/somewhereelse 并呈现 somewhereelse 视图。我猜想当它加载/placements/new 时（出于某种原因）实际上是在寻找一个不存在的/new url 的根状态。

当我添加$urlRouterProvider.otherwise('/not-found'); 并在/placements/new 处重新加载页面时证明了这一点，网址变为myapp.com/placements/not-found。

这是一个错误吗？ （抱歉，未记录的功能）还是我这里有什么问题？

另一个更新。

好的，这就是我现在的想法。

我想我会尝试破解一些东西来解决这个问题，并认为我可以添加一个/new 状态并调用$state.transitionTo('placements.new') 并且一切都会好起来的。事实证明，如果我这样做，网址将变为myapp.com/placements/placements/new - wtf?

Answer 1

找到了！

我更改了我正在搜索的内容并找到了this SO answer，这将我带到了this issue。长话短说，我在 index.html 中添加了<base href="/" />，瞧，一切正常。