How to pass argument to Angularjs's router-ui without showing up in URL?

Question

I have an AngularJS app that uses ui-router to manage my app's states and URL routing.

Here is a sample state:

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl'
})

Here is it's controller:

app.controller('MyCtrl', function($stateParams) {
    console.log('arg1 = ', $stateParams.arg1)     
);

Here is how I send people to it from within another controller:

$state.go('my_state', {'arg1': 'hello'});

When the $state.go line above is executed, I get sent to this URL /my_state/hello and I see the following printed to the browser's debug window:

arg1 = hello

Now here is my question: Can I add another argument to this controller such that:

It is named arg2.
It is optional.
If provided, it can be accessed inside MyCtrl.
It does not show up in the URL.

If so, please show me how.

Amirhossein Mehrvarzi · Accepted Answer · 2018-10-22 09:40:07Z

1

+300

Route parameters in UI Router are optional by default. For example you code (following) says that arg1 is an optional parameter. So both /my_state/:arg1 and /my_state/ will work, but not /my_state (no trailing slash). It also reveals the arg1 value in the URL.

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl'
})

You Can add another optional argument to this controller with your preferences :

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl',
    params: {
        arg2: { value: null }
    }
})

To hide parameters you have to define them in params.

Note that the squash property (inside params) configures how a default parameter value is represented in the URL when the current parameter value is the same as the default value. If squash is not set, it uses the configured default squash policy.

Working Plunker

Update

Another Working Plunker which uses $state.go('my_state', {'arg1': 'hello', 'arg2': 'world'}); inside controller.

Note that there is no functional difference between ui-sref and $state.go for Activating a state

edited Oct 22, 2018 at 9:40

answered Oct 21, 2018 at 18:08

Amirhossein Mehrvarzi

19.1k7 gold badges52 silver badges74 bronze badges

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

4 Comments

Saqib Ali Over a year ago

This didn't work. Arg2 is exposed in the URL path. It shows up like this: http://www.example.com/my_state/hello/world. It seems like I might have to change how I'm directing the browser to my_state. Shouldn't I tell $state.go() to POST arg2 instead of putting in the URL which is what GET does?

Amirhossein Mehrvarzi Over a year ago

@SaqibAli Oh sorry. I forgot to remove arg2 from the url. This solves the problem. I also placed a working plunker at the end.

Saqib Ali Over a year ago

You used the following line in a template file to get to my_state: <a ui-sref="my_state({ arg1: 'hello', arg2: 'world'})">. Can you show me how I would do the same from inside another controller? When I do $state.go('my_state', {'arg1': 'hello', 'arg2': 'world'});, $stateParams.arg2 is undefined inside MyCtrl.

Amirhossein Mehrvarzi Over a year ago

@SaqibAli There is sth wrong with your code. I appended another plunker at the end of answer.

joshbang · Accepted Answer · 2018-10-18 23:44:26Z

1

.state('someState', {
            url: '/my_state?arg1',
            templateUrl: 'http://www.example.com/html/my_file.html', // I assume this is correct for the way you set it up.
            controller: 'MyCtrl',
            params: { // This is the part you'll add
                arg2: {
                    value: null, // you can set a default value
                    squash: true
                }
            }
})

This should do the trick for you! I've used it plenty of times! Very useful.

answered Oct 18, 2018 at 23:44

joshbang

1811 silver badge11 bronze badges

2 Comments

Saqib Ali Over a year ago

My url is url: '/my_state/:arg1. But you used url: '/my_state?arg1', Can you use mine? If so, please edit you answer.

Saqib Ali Over a year ago

This solution doesn't work. I changed $state.go('my_state', {'arg1': 'hello'}); to $state.go('my_state', {'arg1': 'hello', 'arg2': 'world'}); And in the MyCtrl controller, I added the following line: console.log('$stateParams = ', $stateParams);. That console line printed $stateParams = {#: null, arg1: "hello"}. arg2 is nowhere to be seen!

holydragon · Accepted Answer · 2018-10-19 03:19:30Z

0

Try this:

.state('my_state', {
    url: '/my_state',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl',
    params: null
})

answered Oct 19, 2018 at 3:19

holydragon

6,7687 gold badges49 silver badges76 bronze badges

1 Comment

Saqib Ali Over a year ago

This omits arg1.

hannad rehman · Accepted Answer · 2018-10-22 14:31:14Z

0

Using Parameters without Specifying Them in State URLs

You still can specify what parameters to receive even though the parameters don't appear in the url. You need to add a new field params in the state and create links as specified in Using Parameters in Links

For example, you have the state.

.state('contacts', {
        url: "/contacts",
        params: {
            param1: null
        },
        templateUrl: 'contacts.html'
    })

The link you create is

<a ui-sref="contacts({param1: value1})">View Contacts</a>

Or you can pass them to $state.go() too.

$state.go('contacts', {param1: value1})

answered Oct 22, 2018 at 14:31

hannad rehman

4,4315 gold badges39 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to pass argument to Angularjs's router-ui without showing up in URL?

4 Answers 4

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related