How to add optional $stateParams using AngularJs ui-router?

Question

I want to add optional $stateParams to below $state ,Lets say currently i have processId and i want to add assessmentId as optional params. My goal is to launch same template and controller from two places in application and it will launch based on $stateParams.

How can i achieve that task ? app.js

Add Challenge

.state('app.addPrcChallenge', {
            url: '/add/prcChallenge',
            params: { processId: null,assessmentId:null},
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },
            resolve: {
             existingChallenge: function(){
                    return null;
              },

Edit Challenge

.state('app.editPrcChallenge', {
            url: '/edit/prcChallenge/:challengeKey/processId?/:assessmentId?',
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },

Aditya Singh · Accepted Answer · 2016-04-27 15:22:25Z

1

Directly mention them in the url with a ? suffix for optional params:

.state('app.addPrcChallenge', {
   url: '/add/prcChallenge/:processId/:assessmentId?',
   templateUrl: 'views/process/processChallenge.html',
   controller: 'ProcessChallengesCtrl',
   data: {
     authenticate: true
   },
   resolve: {
     existingChallenge: function(){
        return null;
     }
   }
});

You can ignore the params property after this change, as the params property is used to define params which do not appear as part of the URL

edited Apr 27, 2016 at 15:22

answered Apr 27, 2016 at 15:10

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

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

2 Comments

hussain Over a year ago

How about edit screen there i need three params where two params will be optional I added edit $state to question.

Aditya Singh Over a year ago

Because you missed the : before it

Vaibhav Jain · Accepted Answer · 2016-04-27 15:20:19Z

0

You URL property should be like this:

.state('app.addPrcChallenge', {
            url: '/add/prcChallenge/:processId/:assessmentId?',
            templateUrl: 'views/process/processChallenge.html',
            controller: 'ProcessChallengesCtrl',
            data: {
                authenticate: true
            },
            resolve: {
             existingChallenge: function(){
                    return null;
              },

edited Apr 27, 2016 at 15:20

answered Apr 27, 2016 at 15:08

Vaibhav Jain

7174 silver badges15 bronze badges

6 Comments

hussain Over a year ago

if i am specifying params in url , do i still need params:{processId:null,assessmentId:null} ?

Vaibhav Jain Over a year ago

Then you won't need that, it provides the default value of the params

Vaibhav Jain Over a year ago

I edited & added ? to the first param, which means it is optional

Aditya Singh Over a year ago

The answer you have mentioned is wrong, because it does not have ? after assessmentId

Aditya Singh Over a year ago

Ok. I see that you have edited it but this still is wrong because you are making processId as optional, while the requirement is for assessmentId to be optional. See my answer above

|

Guilherme do Valle · Accepted Answer · 2020-11-06 14:30:54Z

0

.state('app.addPrcChallenge', {
   url: '/add/prcChallenge/:processId/:assessmentId',
   templateUrl: 'views/process/processChallenge.html',
   controller: 'ProcessChallengesCtrl',
   params: {
     processId: null,
     assessmentId: null
   }
   data: {
     authenticate: true
   },
   resolve: {
     existingChallenge: function(){
        return null;
     }
   }
});

answered Nov 6, 2020 at 14:30

Guilherme do Valle

5181 gold badge4 silver badges19 bronze badges

1 Comment

Brhaka Over a year ago

Please, provide more details like why you chose this approach and why your code works.

Collectives™ on Stack Overflow

How to add optional $stateParams using AngularJs ui-router?

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related