Url with multiple optional parameters using stateProvider angularjs

Question

As told by Can angularjs routes have optional parameter values? and AngularJS: Routing with URL having optional parameters question mark ? with parameter name should make it optional. Its not helping me.

var app = angular.module('app', ['ui.router','ngRoute']);

app.config(function ($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/a');
    $stateProvider.state('a', {
        url: '/a',
        templateUrl: 'views/a.html'
    }).state('b', {
        url: '/b/:code?/:d?',
        templateUrl : 'views/b.html'
    })
});

This url http://localhost:xx/kk/#/b/1/2 works fine for me. But http://localhost:xx/kk/#/b (without any parameter) and http://localhost:xx/kk/#/b/1 not working for me...

You could see I am using $stateProvider with ui-router. I do not want to switch to $urlRouteProvider

score 6 · Accepted Answer · edited May 23 '17 at 12:10

6

There is a working plunker

What we need is a setting called params : {} and it could handle optional params:

 params: {
    code: {squash: true, value: null},
 }

So the state defintion would be

.state('b', {
    url: '/b/:code/:d',
    templateUrl : 'views/b.html',
    params: {
      code: {squash: true, value: null},
      d   : {squash: true, value: null},
    }
})

And these will work:

<a href="#/b">
<a href="#/b/code1">
<a href="#/b/code22">
<a href="#/b/code333/d4">

Check these for more details and examples:

And some more magic here:

edited May 23 '17 at 12:10

Community

1
1

answered Nov 25 '15 at 11:54

Radim Köhler

122,561
47
239
335

Sorry I edited my question a bit. If you don't mind please edit the answer, otherwise i will do it after testing and getting succeeded with it – Sami Nov 25 '15 at 12:00
I created a plunker for you http://plnkr.co/edit/MXb3Eklfrw8fWRuPPk1u?p=preview, extended the answer with all the details - plus other examples in the links... hope that will help ;) – Radim Köhler Nov 25 '15 at 12:10
Perfect. Even working with http://localhost:xx/yy/#/state1/1/2/substate1/2/3... Do you think that angular could allow to choose the parameter like ttp://localhost:96/angle/#/b/d1 = > here i want to leave the `code` and give value of `d` – Sami Nov 25 '15 at 13:51
Well, yes, that is covered in my links... but seems you want more and more ;) and do not want to accept - while I did answered your question, right? Well if you have new question, ask new question. Would you agree? BTW here you can find another approach I do like http://stackoverflow.com/a/30230421/1679310 and here is the way how to play with restrictions http://stackoverflow.com/a/31837507/1679310 – Radim Köhler Nov 25 '15 at 13:59
Sorry i had clicked accepted, immediately after your last edit (1 hour ago) unfortunately my connection wasn't working that time, but i noticed later (just before getting your last comment :). Yes i should ask another question, what i ultimately want to achieve is unique url for every state (after each event on ui) of application, so we could provide the testing team with those all links and tester could could have no other scenario – Sami Nov 25 '15 at 14:08
Please, if I did not give you what you want, ask another, go get larger and fresh audience, BUT, the two links above... (my last comment or answer itself) are really having the answer. I'd say. The point is to use restriction, some set of values (en|cz|de)... that will clearly help to decide what is the code and what another parameter. Pleaese observe that and also, play with those examples.. it could give all the details. Good luck with UI-Router anyhow ;) – Radim Köhler Nov 25 '15 at 14:11

Url with multiple optional parameters using stateProvider angularjs

1 Answers1