CODEWITHSUNDEEP
angularjsangular-ui-router
Saqib Ali
Saqib Ali

Reputation: 12545

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

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:

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

If so, please show me how.

Upvotes: 1

Views: 2505

Answers (4)

hannad rehman
hannad rehman

Reputation: 4331

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

Upvotes: 0

Amirhossein Mehrvarzi
Amirhossein Mehrvarzi

Reputation: 18954

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

Upvotes: 1

holydragon
holydragon

Reputation: 6728

Try this:

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

Upvotes: 0

joshbang
joshbang

Reputation: 181

.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.

Upvotes: 1

Related Questions