Some Different ways of passing state params in AngularJS
Posted By : Rohit Goyal | 07-Apr-2017
There are 2 ways by that you can pass parameter from one state to another state.
1) Using UI router
2) Using $state.go Method
Method:1 => Using UI router
(i) Passing single Params using UI router.
HTML:-
<button ui-sref="app.editApi({apiId:{{'api.apiId'}}})">Click</button>
Js:- Let's we have templateUrl of our html file and EditApiCtrl is attached to it.Then we can pass parameter in this way.
.state('app.editApi', {
url: '/edit-api/:apiId', // passing single params to state
templateUrl: 'angular/views/merchant-api/editApi.html',
data: {
title: 'Create API'
},
controller: "EditApiCtrl",
resolve: load(['angular/scripts/controllers/merchant-api/editApiController.js'])
})
(ii) Passing Multiple Params using UI router.
Let's we have templateUrl of our html file and UserProfileCtrl is attached to it.Then we can pass parameter in this way.
HTML:-
<button ui-sref="app.userProfile({userName:{{'user.name'}},email:{{'user.email'}}})">Click</button>
JS:-
.state('app.userProfile', {
url: '/user-profile/:userName/:email', // passing mutiple params to state
templateUrl: 'angular/views/user-management/user-profile.html',
data: {
title: 'User Profile'
},
controller: "UserProfileCtrl",
resolve: load(['angular/scripts/controllers/user-management/userProfileController.js'])
})
Method:2 => Using $state.go Method
(i) Passing Multiple Params using $state.go Method.
$state.go('view', { 'username': "Rohit"})
(ii) Passing Multiple Params using $state.go Method.
$state.go('view', { 'username': "Rohit", 'Id': '1' })
Receving Params inside controller:-
You can reterive parameter inside your controller using $state, $stateParams as a dependency of controller
.controller('userProfileCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) {
$scope username = $stateParams.userName //(parameter Name)
$scope email = $stateParams.email //(parameter Name)
}]);
That's it.
I hope my blog will help to understand how you can state params in AngularJs.
If you have any doubt feel free to contact me at my Skype Id:- rohit.oodles
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.