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

Community · Accepted Answer · 2017-05-23 12:10:54Z

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, 2017 at 12:10

CommunityBot

11 silver badge

answered Nov 25, 2015 at 11:54

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

6 Comments

Sami Over a year ago

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

Radim Köhler Over a year ago

I created a plunker for you plnkr.co/edit/MXb3Eklfrw8fWRuPPk1u?p=preview, extended the answer with all the details - plus other examples in the links... hope that will help ;)

Sami Over a year ago

Perfect. Even working with 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

Radim Köhler Over a year ago

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 stackoverflow.com/a/30230421/1679310 and here is the way how to play with restrictions stackoverflow.com/a/31837507/1679310

Sami Over a year ago

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

|

Collectives™ on Stack Overflow

Url with multiple optional parameters using stateProvider angularjs

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related