How should I use 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?

Shouldnt you be assigning url for 'placements.new' as '/placements/new' ? — Nishanth Nair
– Nishanth Nair, Commented Nov 1, 2013 at 12:05
No, because there is an abstract state which is the parent state so the Url becomes /placements/new by magic. — Simon
– Simon, Commented Nov 1, 2013 at 12:14
Does it work without the mapToView calls? Like if you just inline some templates? — Tim Kindberg
– Tim Kindberg, Commented Nov 2, 2013 at 2:00
No, that mapToViews is just a function that concatenates a string with the passed in values. Like I say, this all works nicely when I use ui-sref or $state.transitionTo() but not if I reload the page — Simon
– Simon, Commented Nov 2, 2013 at 9:17

Community · Accepted Answer · 2017-05-23 11:50:06Z

0

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.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Nov 2, 2013 at 19:09

Simon

2,8312 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How should I use Angular UI Router?

Update

Another Update.

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

Another Update.

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related