How to send parameters in Angularjs $state.go?

Question

I am developing AngularJS application. I am trying to send values in $state.go to different states. I am trying as below.

This is my state:

$stateProvider
.state('Registration.OTPVerification', {
 url: '/RegistrationOTPVerification',
 templateUrl: 'Registration/RegistrationOTP.html',
 controller: 'RegistrationOTPVerification'
});

I am trying as below.

var customerid = response.data.ID;
var OTP = response.data.OTP;
$state.go('Registration.OTPVerification', customerid,OTP);

I am trying to receive parameters in below controller.

(function () {
 angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams) {
 var customerid = $stateParams.customerid;
 var OTP = $stateParams.OTP;
 alert(customerid);
 }]);
})();

I am not able to receive parameters. Any help would be appreciated. Thank you.

• Vinod Louis: in state URL change /RegistrationOTPVerification/:customerid/:otp and in $state.go('Registration.OTPVerification',{customerid:1,otp:2314}) then it will work. Need in Url and pass in redirection
• tanmay: @VinodLouis OTP and such sensitive information should probably not be part of URL params?
• Vinod Louis: @tanmay Im not supporting for OTP to pass via URL i was just demostrating how to pass path params

Answer 1

You need to have those as params in order to be able to send them through state. Like this:

$stateProvider
.state('Registration.OTPVerification', {
 url: '/RegistrationOTPVerification',
 params: {
 customerid: null,
 OTP: null
 },
 templateUrl: 'Registration/RegistrationOTP.html',
 controller: 'RegistrationOTPVerification'
});

Now, you can use $state.go like following:

$state.go('Registration.OTPVerification', {
 customerid: 123,
 OTP: 2323
});

Finally, you can access them way you are using $stateParams.customerid and $stateParams.OTP but make sure you have $stateParams injected just like you have $state and $translate injected.

• Niranjan Godbole: Thank you. I am getting below error. Failed to instantiate module RoslpApp due to: Error: Invalid params in state 'Registration.OTPVerification'
• tanmay: @NiranjanGodbole according to this, that message comes from versions of ui-router 0.2.10 and earlier and those versions don't support passing objects as parameters. So you need to update your version of ui-router
• Niranjan Godbole: I added <script src="cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/…>. I removed error.but now i am getting error as Cannot read property 'customerid' of undefined
• tanmay: @NiranjanGodbole as I have mentioned in answer, you need to inject $stateParams just like $state and $translate in your controller where you have $stateParams.customerid
• rolinger: I am using the above solution and its not working. Its routing to the right controller/page but no parameters are being passed. Does params have be defined at the root level of the .state(..) ? I have my params under a views and its not working.

Answer 2

Just use $state.go as this:

$state.go('Registration.OTPVerification',
 {
 customerid: response.data.ID,
 OTP: response.data.OTP
 });

Also you need to define the url parameters in the $stateProvider.state as:

$stateProvider
 .state('Registration.OTPVerification', {
 url: '/RegistrationOTPVerification',
 params: {
 customerid: '',
 OTP: ''
 },
 templateUrl: 'Registration/RegistrationOTP.html',
 controller: 'RegistrationOTPVerification'
});

Here's the updated controller to get the params:

(function () {
 angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams) {
 var customerid = $stateParams.customerid;
 var OTP = $stateParams.OTP;
 alert(customerid);
 }]);
})();

• Tundzhel Mert: You can also set the initial values of the params to null.
• Niranjan Godbole: Thank you. When i changed my route i got following error. Unknown provider: $stateParams
• Tundzhel Mert: @NiranjanGodbole you should add it to the controller you are trying to get the params
• Tundzhel Mert: @NiranjanGodbole I've updated the answer to fix provider error too
• Niranjan Godbole: @Mert i am getting below error. Failed to instantiate module RoslpApp due to: Error: Invalid params in state 'Registration.OTPVerification'

Answer 3

Link - https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.state.$state

Syntax - go(to, params, options) params - A map of the parameters that will be sent to the state, will populate $stateParams

$stateProvider.state('Registration.OTPVerification', {
 url: '/RegistrationOTPVerification/:data',
 templateUrl: 'Registration/RegistrationOTP.html',
 controller: 'RegistrationOTPVerification'
});
$state.go('Registration.OTPVerification', response);
(function () {
 angular.module('RoslpApp').controller('RegistrationOTPVerification', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams) {
 var customerid = $stateParams.data.ID;
 var OTP = $stateParams.data.OTP;
 alert(customerid);
 }]);
})();

Answer 4

Try this.
 $stateProvider
 .state('Registration.OTPVerification', {
 url: '/RegistrationOTPVerification',
 params: {
 customerid: null,
 OTP:null
 },
 templateUrl: 'Registration/RegistrationOTP.html',
 controller: 'RegistrationOTPVerification'
 })

when calling pass parameter like this:

 $state.go('Registration.OTPVerification',{customerid: "gfdg",OTP:"4545"});

• Niranjan Godbole: Thank you. If i put params: { customerid: null, OTP:null }, i am getting error. Do i need to inject anything to work with params?
• Wintergreen: no . you can set initial values as null. Which type of error you are getting??.
• Niranjan Godbole: Invalid params in state 'Registration.OTPVerification' I am getting this error
• Niranjan Godbole: i am getting below error Failed to instantiate module RoslpApp due to: Error: Invalid params in state 'Registration.OTPVerification'

Answer 5

I wanted to add my two cents to this. There is a gotchya in the above solutions that cause others issues. I use views in my states and was placing the params ($stateParams) in the views and it wasn't working. The params must exist at the root level of the state controller. I am not certain if you can pass them listed under the views...and if you can how you would go about passing/retrieving the values.

Here is my initial state controller definition:

 .state('tab.clubs', {
 cache: true,
 url: '/clubs',
 views: {
 'tab-clubs': {
 templateUrl: 'templates/tab-clubs.html',
 controller: 'ClubCtrl',
 params: {
 'refreshClubs' : 0,
 'pushAction' : 0,
 'pushSub' : null,
 'pushMsg' : null,
 'pushCode' : null
 }
 }
 }
 })

Then in controller:

var payload = {
 'pushAction' : 1,
 'pushSub' : "blah",
 'pushMsg' : "more blah blah",
 'pushCode' : code
}
$state.go('tab.clubs',payload) ;

It would route to the proper controller/page, but no parameters were being passed. Until I changed the state provider to the following:

 .state('tab.clubs', {
 cache: true,
 url: '/clubs',
 params: {
 'refreshClubs' : 0,
 'pushAction' : 0,
 'pushSub' : null,
 'pushMsg' : null,
 'pushCode' : null
 },
 views: {
 'tab-clubs': {
 templateUrl: 'templates/tab-clubs.html',
 controller: 'ClubCtrl'
 }
 }
 })