Angular ui route based on URL path + hash path

Question

I'm trying to use the UI router to display a different template for the following path. I'm adding the full URL so you can see exactly what the intention is.

Basically I want the router to account for the actual URL path, but right now no template gets detected and the state provider redirects to / instead.

http://localhost/dashboard/#home

And this is what goes in to the $stateProvider.

.state('dashboard.home', {
   url: '/home',
   path: 'dashboard',
   templateUrl: '/partials/dashboard/home'
})

Are you aware of it that "Dot notation" (dashboard.home) is used for child state? means, withour "dashboard" state, you can not register child state? — Asik
– Asik, Commented Nov 17, 2014 at 18:11
I have never heard about this feature (path). Do you have a reference where I can read about it? — akonsu
– akonsu, Commented Nov 17, 2014 at 18:12
@Asik Even if I simply name it dashboard, it still doesn't work. — flavian
– flavian, Commented Nov 17, 2014 at 18:28
I guess, dashboard is your directory name.. index.html is inside this dashboard folder. So you should register with "home"...not "dashboard" — Asik
– Asik, Commented Nov 17, 2014 at 18:37

Radim Köhler · Accepted Answer · 2014-11-17 18:38:24Z

I created plunker with example here. In general, we can have parent child like this:

$stateProvider
  .state('dashboard', {
    template: '<div ui-view=""></div>',
  })
$stateProvider
  .state('dashboard.home', {
    url: '/home2',
    path: 'dashboard',
    templateUrl: '/partials/dashboard/home'
  })

What we can see, there is a parent state 'dashboard' (in this case without url defined) and there is its child 'dashboard.home', which url here is url: '/home2'. So going to #/home2, we will reach this state

Or we can use this:

$stateProvider
  .state('dashboard_home', {
    url: '/home',
    templateUrl: '/partials/dashboard/home'
  })

This is state without a parent. That's why it cannot contain dashboard., which would be evaluated as: "find parent with name 'dashboard'"

And these states are working when clicked this link:

<a href="#/home">
<a href="#/home2">

Check it here

Collectives™ on Stack Overflow

Angular ui route based on URL path + hash path

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related