AngularJS UI-Router : Get the absolute URL of the state with the parameters

Question

I wanted to be able to change the address' URL without changing the state, as to prevent rerendering. From my search, ui-router currently does not provide this, but $location.path from anuglar does.

So, naturally, I wanted to use $state.get(stateName) to get to the state's URL, so that I don't manually type the URL.

I have two problems:

$state.get(stateName) returns the relative path only. How can I get the absolute path?
It also returns the state's definition, with the parameters undefined. How can I get the URL with the parameter in place?

For instance, if I have a state called user.home.view with user.home, I have my states defined as

'user': {
     abstract: true,
     url: '^/users/'
},
'user.home': {
     url: ''
},
'user.home.view': {
     url: ':id/'
}

So right now, $state.get(user.home.view).url returns :id/. How can I get the full URL (i.e., /users/5/)?

brenjt · Accepted Answer · 2015-08-28 22:19:50Z

129

You should use $state.href().

To get the absolute URL you can then use:

$state.href('user.home.view', {}, {absolute: true});
To get the URL with the parameters in place you need to add them as the second argument

edited Aug 28, 2015 at 22:19

brenjt

16.3k14 gold badges80 silver badges120 bronze badges

answered Jul 1, 2014 at 4:37

adamK

3,8795 gold badges39 silver badges49 bronze badges

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

2 Comments

rebelliard Over a year ago

Can you reverse this? Get the state from an href?

Jean F. Over a year ago

I would suggest to have a look at ui.router.util angular-ui.github.io/ui-router/site/#/api/…

Jean F. · Accepted Answer · 2014-09-02 02:26:11Z

101

What about :

$state.href($state.current.name, $state.params, {absolute: true})

answered Sep 2, 2014 at 2:26

Jean F.

1,7851 gold badge19 silver badges16 bronze badges

1 Comment

sickrandir Over a year ago

the most useful and complete answer!

Isaac Gregson · Accepted Answer · 2016-11-09 19:41:56Z

2

For getting the absolute URL without parameters, I'm finding I need to pass inherit: false, eg:

$state.href('home', {}, {absolute: true, inherit: false})

Without inherit: false I was getting any/all params that may be present.

edited Nov 9, 2016 at 19:41

answered Nov 4, 2016 at 20:35

Isaac Gregson

2,0851 gold badge22 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS UI-Router : Get the absolute URL of the state with the parameters

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related