get data from angular.module config to the corresponding controller

Question

I have the following configuration, I have a config where a url is called using $http.get method and the data is stored in a variable "alpha". How do I access this variable from the controller. I tried to inject $rootScopeProvider into the config and tried to set $rootScope.pqr = alpha. This gives an error. How do I do it?

angular.module('thisApp', [someDependencies]).config( function($stateProvider, $urlRouteProvider) {
    $http.get('url').then(function(response) {
        var alpha = response.data; // i need to access this data in the controller
    )};
}).directive('pqrTitle', function () {
    return {
        restrict: 'A',
        controller: function($scope, $rootScope) {

        // I need to access alpha here
    });
});

How do I do this?

How are you accessing `$http` from your config block? – rob Jul 10 '15 at 13:05 — rob, Jul 10 '15 at 13:05

skubski · Answer 1 · 2015-07-10T14:23:39.247

Actually I am wondering how you got the $http service in the configuration phase too. You can only configure providers and load constants in that phase according to the documentation:

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

When I try to inject a service into a config phase I get the following error: link.

Best thing to do is to write a service to get the information from the server you want and inject that service into your directive. (And on the other places you need it)

Example: (working example is more extensive)

.controller('TestController', function(alphaService) {
  var self = this;

  self.alpha = alphaService.get().success(function(data) {
    self.alpha = data;
  });
})

.factory('alphaService', function($http) {
  return {
    get: function() {
      return $http.get('url');
    }
  };
})

.directive('myDir', function(alphaService) {
  return {
    restrict: 'E',
    link: function (scope, element, attr) {
      scope.alpha = null;

      alphaService.get().success(function(data) {
        scope.alpha = data;
      });
    },
    templateUrl: 'mydir.html'
  };
});

score 1 · Accepted Answer · answered Jul 13 '15 at 05:26

If you are using ui-router-extras, you can use $futureStateProvider for this, you could also use $rootScope and access it in the controller

angular.module('thisApp', [someDependencies])
.config( function($futureStateProvider, $stateProvider, $urlRouteProvider) {

    $futureStateProvider.addResolve(['$http', '$rootScope', function($http, $rootScope) {
        $http.get('url').then(function(response) {
            $rootScope.alpha = response.data;
        )};
    }]);
})

1) in the controller, you should inject rootScope and access the variable. Read this up to understand the $futureStateProvider in ui-router extras

2) if you do not want to use rootScope, make a service and inject it into teh $futureStateProvider.addResolve, set the variable in the service. After that you can get the variable value through a getter function

Hope it helps

get data from angular.module config to the corresponding controller

2 Answers2