我应该如何使用Angular UI Router？

Question

I have searched the Internets for a couple of days, but can't find what I'm looking for.

I am building an SPA using angularjs but I'm struggling with something I think should be quite basic. Coming from a ASP.NET MVC mindset, I am trying to set up routes for listing data and creating new data, for example:

.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'
})

So with these states set up, I would think that navigating to /placements/new would give me the "new placements" view.

This works perfectly if I use the ui-sref navigation

The problem comes from when I type myapp.com/placements/new into a browser and hit GO, no route is matched at all. However, if I go to myapp.com/placements I see the correct view as expected.

My question is this: Am I right in how I think the router should be set up or do I need to have a completely separate state for new placements, such as myapp.com/newplacement ?

Update

It seems to be something to do with the way ui-router figures out the state on first page load. If I load the page with the url myapp.com/placements/new , then click on a navigation item which points to a state with the url of '/' (meaning home page, right?) then the url becomes myapp.com/placements/ and the view for the home page is rendered. Similarly, if I click another nav link pointing to '/somewhereelse' the url becomes myapp.com/placements/somewhereelse and the somewhereelse view is rendered. I'm guessing then that when it loads /placements/new it (for some reason) is actually looking for a root state with the url of /new which doesn't exist.

This is proven when I add $urlRouterProvider.otherwise('/not-found'); and reload the page at /placements/new , the url becomes myapp.com/placements/not-found .

Is this a bug? (sorry, undocumented feature) or have I got something wrong here?

Another Update.

Ok, this is doing my head in now.

I figured I'd have a go at hacking something to get around this, and thought I'd get away with adding a /new state and just calling $state.transitionTo('placements.new') and all will be well. Turns out that if I do that, the url becomes myapp.com/placements/placements/new - wtf?

Answer 1

Found it!

I changed what I was searching for and found this SO answer which lead me to this issue . Long story short, I added <base href="/" /> to my index.html and voila, all is working well.