javascript - 我应该如何使用 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 会给我“新展示位置” View 。

如果我使用 ui-sref 导航，效果非常好

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

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

更新

这似乎与 ui-router 计算首页加载状态的方式有关。如果我使用 url myapp.com/placements/new 加载页面，然后单击指向 url 为 '/' 的状态的导航项(意思是主页，对吧？)然后 url 变为 myapp.com/placements/ 并且呈现主页的 View 。同样，如果我单击另一个指向 '/somewhereelse' 的导航链接，则 url 变为 myapp.com/placements/somewhereelse 并且 somewhereelse View 为呈现。我猜测，当它加载 /placements/new 时，它(出于某种原因)实际上是在寻找 URL 为 /new 的根状态，但它并没有存在。

当我添加 $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 。长话短说，我添加了 <base href="/" />到我的index.html 瞧，一切都运行良好。