AngularJS angular ui router - pass user data to the controller

Question

Below is my code:

.state('tab.dash', { url: '/dash', views: { 'tab-dash': { templateUrl: 'templates/tab1.html', controller: 'QuestionsCtrl' //,resolve: { type: '.net' } } } }) .state('tab.friends', { url: '/friends', views: { 'tab-friends': { templateUrl: 'templates/tab1.html', controller: 'QuestionsCtrl' //,resolve: { type: 'SQL' } } } }) 

I want to pass another custom property for the two routes above, since they use the same controller and view to distinguish it. I have tried a lot of things. Please help how to do this!

Answer 1

you can transfer user data as follows

 .state('tab.dash', { url: '/dash', data: { customData1: 5, customData2: "blue" }, views: { 'tab-dash': { templateUrl: 'templates/tab1.html', controller: 'QuestionsCtrl' //,resolve: { type: '.net' } } } }) .state('tab.friends', { url: '/friends', data: { customData1: 6, customData2: "orange" }, views: { 'tab-friends': { templateUrl: 'templates/tab1.html', controller: 'QuestionsCtrl' //,resolve: { type: 'SQL' } } } }) 

In your controller, you can get the data value as follows

 function QuestionsCtrl($state){ console.log($state.current.data.customData1); console.log($state.current.data.customData2); } 

Read more about this topic here https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-custom-data

Answer 2

There are several options for this,

For small datasets you can use $ cookieStore, for data that is under 4k Another option, especially with large datasets, would be to use local storage and then retrieve the data to load / reload the page. if this is just a very small amount of data or data that is used on several pages, you can use $ rootscope, but this is not the best option, since it just pollutes the global namespace. The last option, depending on how the data is retrieved, a service can be implemented that is basically a singleton that can be transferred to different angular areas.