How to pass custom data in $state.go() in angular-ui-router? - angularjs

Question

I want to pass a custom object to another state via $state.go() in UI-Router.
var obj = {
a: 1,
b: 2,
fun: function() {
console.log('fun');
}
}
$state.go('users', obj);
But I need to run fun() in target state, so I can't pass this object in URL parameter. In target controller, I tried to fetch the value of obj via $stateParams but got empty object {}:
function UserCtrl($stateParams) {
console.log($stateParams); // will be empty
}
So how to pass obj to state "users" correctly?

Answer 1

Define state with parameters like this:
$stateProvider
.state('user', {
url: '/user',
params: {
obj: null
},
templateUrl: 'templates/user.html',
controller: 'UserCont'
})
when calling pass parameter like this:
$state.go('user',{obj: myobj});
in the controller UserCon receive parameter like:
$state.params.obj
User $state is one of the parameter in the controller defined like
function UserCon($scope, $http, $state){

Answer 2

var obj = {
a: 1,
b: 2,
fun: function() {
console.log('fun');
}
}
$state.go('users', obj);
.....
$stateProvider
.state('user', {
url: '/user/:obj',
templateUrl: 'templates/user.html',
controller: 'UserCont'
})
..... or .....
$stateProvider
.state('user', {
url: '/user',
params: {
obj: null
},
templateUrl: 'templates/user.html',
controller: 'UserCont'
})
.....
function UserCtrl($state) {
console.log($state.params.obj);
}

Answer 3

//Use the method chaining mechnism as show below:
var RoutingApp = angular.module('RoutingApp', ['ui.router']);
RoutingApp.config( [ '$stateProvider', '$urlRouterProvider','$locationProvider', function( $stateProvider, $urlRouterProvider,$locationProvider ){
$stateProvider
.state('home', {
url:'/home',
templateUrl: 'template/home.html',
controller: 'homeController as homeCtrl',
data: {
customDatahome1:"Home Custom Data 1",
customDatahome2:"Home Custom Data 2"
}
})
.state('courses', {
url:'/courses',
templateUrl: 'template/courses.html',
controller: 'coursesController as coursesCtrl',
data: {
customDatacourses1:"Courses Custom Data 1",
customDatacourses2:"Courses Custom Data 2"
}
})
.state('students', {
url:'/students',
templateUrl: 'template/students.html',
controller: 'studentsController'
})
.state('studentDetails', {
url:'/students/:id',
templateUrl: 'template/studentDetails.html',
controller: 'studentDetailsController'
});
$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode(true);
} ] );
RoutingApp.controller( 'homeController', function( $state ){
var vm = this;
vm.message = "Home Page";
this.customDatahome1 = $state.current.data.customDatahome1;
this.customDatahome2 = $state.current.data.customDatahome2;
this.customDatacourses1 = $state.get('courses').data.customDatacourses1;
this.customDatacourses2 = $state.get('courses').data.customDatacourses2;
});
RoutingApp.controller('coursesController', function($scope){
var vm = this;
$scope.courses = ['PHP','AngularJS','Hadoop','Java','.Net','C#'];
console.log("Hello Courses");
});
Template:home.html
<h1 ng-controller="homeController as homeCtrl">{{homeCtrl.message}} <br> {{homeCtrl.message1}}</h1>
<div>
Vision Academy is established in 2011 By 2 Software Engineer offer very cost effective training.
</div>
<ul>
<li>Training Delivered by real time software experts having more than 10 years of experience </li>
<li>Realtime Project discussion relating to the possible interview questions</li>
<li>Trainees can attend training and use lab untill you get job</li>
<li>Resume prepration and mock up interview</li>
<li>100% placement asistance</li>
<li>Lab facility</li>
</ul>
<fieldset ng-controller="homeController as homeCtrl">
<legend>Home</legend>
Custom Data Home 1 : {{homeCtrl.customDatahome1}}<br>
Custom Data Home 2 : {{homeCtrl.customDatahome2}}<br>
</fieldset>
<fieldset ng-controller="homeController as homeCtrl">
<legend>Courses</legend>
Custom Data Courses 1 : {{homeCtrl.customDatacourses1}}<br>
Custom Data Courses 2 : {{homeCtrl.customDatacourses2}}<br>
</fieldset>