title: AngularJS ui-router: how to resolve typical data globally for all routes?
body: <p>I have an AngularJS service which communicates with the server and returns 
  translations of different sections of the application:</p>
  
  <pre><code>angular
       .module('utils')
       .service('Translations', ['$q','$http',function($q, $http) {
          translationsService = {
              get: function(section) {
                  if (!promise) {
                      var q = $q.defer();
                      promise = $http
                              .get(
                                  '/api/translations',
                                  {
                                      section: section
                                  })
                              .success(function(data,status,headers,config) {
                                  q.resolve(result.data);
                              })
                              .error(function(data,status,headers,config){ 
                                  q.reject(status);
                              });
                      return q.promise;
                  }
              }
          };
  
          return translationsService;
      }]);
  </code></pre>
  
  <p>The name of the section is passed as the <code>section</code> parameter of the <code>get</code> function.</p>
  
  <p>I'm using AngularJS ui-router module and following design pattern described <a href="https://scotch.io/tutorials/making-skinny-angularjs-controllers" rel="noreferrer">here</a> </p>
  
  <p>So I have the following states config:</p>
  
  <pre><code>angular.module('app')
      .config(['$stateProvider', function($stateProvider) {
      $stateProvider
      .state('users', {
          url: '/users',
          resolve: {
              translations: ['Translations',
                  function(Translations) {
                      return Translations.get('users');
                  }
              ]            
          },
          templateUrl: '/app/users/list.html',
          controller: 'usersController',
          controllerAs: 'vm'
      })
      .state('shifts', {
          url: '/shifts',
          resolve: {
              translations: ['Translations',
                  function(Translations) {
                      return Translations.get('shifts');
                  }
              ]            
          },
          templateUrl: '/app/shifts/list.html',
          controller: 'shiftsController',
          controllerAs: 'vm'
      })
  </code></pre>
  
  <p>This works fine but as you may notice I have to explicitly specify <code>translations</code> in the resolve parameter. I think that's not good enough as this duplicates the logic.</p>
  
  <p>Is there any way to resolve translations globally and avoid the code duplicates. I mean some kind of middleware. </p>
  
  <p>I was thinking about listening for the <code>$stateChangeStart</code>, then get translations specific to the new state and bind them to controllers, but I have not found the way to do it.</p>
  
  <p>Any advice will be appreciated greatly.</p>
  
  <p>Important note:
  In my case the resolved <code>translations object</code> must contain the translations data, not service/factory/whatever.</p>
  
  <p>Kind regards.</p>