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.

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.

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);
    }]);
})();