CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
hussain
hussain

Reputation: 7083

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

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

Upvotes: 0

Views: 1937

Answers (3)

Guilherme do Valle
Guilherme do Valle

Reputation: 508

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

Upvotes: 0

Aditya Singh
Aditya Singh

Reputation: 16660

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

Upvotes: 1

Vaibhav Jain
Vaibhav Jain

Reputation: 727

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;
              },

Upvotes: 0

Related Questions