AngularJS angular ui router - Pass custom data to controller

Question

Following 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 aa different custom property to the above two routes since they use the same Controller and View, in order to differentiate it. I have tried a hell lot of things. Please help how to do this!

Answer 1

you can pass custom 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 to do this,

For smaller data sets you could use the $cookieStore, for data that is under 4k Another option, especially with large data sets, would be to use Local Storage and then retrieve the data on page load/reload. if it is only a very small amount of data, or data that is used through out multiple page you could use $rootscope, but this is not the best option as it just like polluting the global name space. The last option, depending on how the data is retrieved, a service could be implemented, that is basically a singleton that can be passed to various angular scope.