How to pass two parameters in route ui

Question

I have controller that needs to receive two id values. One id value identifies a vendor and the second identifies an event (eventId and VendorId).

My current state is as such.

 .state('/vendordetail', {
         url: '/vendordetail/:vendorId',
         templateUrl: '/home/vendordetail',
         controller: 'VendorDetailController',
         resolve: {
             vendorId: ['$stateParams', function ($stateParams) {
                 return $stateParams.vendorId;
             }],
             vendorPreload: ['$stateParams', 'vendorDetailRepo', '$state', function ($stateParams, vendorDetailRepo, $state) {
                 if ($stateParams.vendorId != "")
                     return vendorDetailRepo.get({ id: $stateParams.vendorId }).$promise;
             }]
         }

     });

At the moment I am able to take the vendorId. But I would like to include an eventId in the state. Can anyone help me modify my state to take the second parameter (eventId) ?

Thank you.

Answer 1

First oft all I would advice you to put your parameters as url-parameters if you don't have good reasons against it.

Following this advice your state may look as follows:

state('/vendordetail', {
     url: '/vendordetail?:vendorId:eventId',
     templateUrl: '/home/vendordetail',
     controller: 'VendorDetailController',
     resolve: {
         vendorId: ['$stateParams', function ($stateParams) {
             return $stateParams.vendorId;
         }],
         eventId: ['$stateParams', function ($stateParams) {
             return $stateParams.eventId;
         }],
         vendorPreload: ['$stateParams', 'vendorDetailRepo', '$state', function ($stateParams, vendorDetailRepo, $state) {
             if ($stateParams.vendorId != "")
                 return vendorDetailRepo.get({ id: $stateParams.vendorId }).$promise;
         }]
     }

 });

By the way: you don't need to resolve the parameters. You can simply inject $stateParams into your controller.