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

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..