inject $rootScope in config angularJs

Question

I have problem to inject $rootScope in config angularJS, this is my code, but still error, maybe anyone help me how to inject $rootScope in config angularJS. .

thanks.

(function() {
  'use strict';

  angular
    .module('uliappApp')
    .directive('angular-loading-bar', ['cfpLoadingBarProvider'])
    .config(cfpLoadingBarProvider);

  cfpLoadingBarProvider.$inject = ['cfpLoadingBarProvider', '$rootScope'];

  function cfpLoadingBarProvider(cfpLoadingBarProvider, $rootScope) {
    cfpLoadingBarProvider.includeBackdrop = true;
    console.log(rootScope.concessionLoadingScreen);
    cfpLoadingBarProvider.spinnerTemplate = '<div class="loading-bar-container">'
        + '<div id="loading-bar-spinner"><div class="spinner-icon"></div></div></div>';
  }
})();

Answer 1

You don't need rootScope in configuration phase, it can be simply achieved by using .run().

angular
    .module('uliappApp')
    .run(['$rootScope', function($rootScope){
        $rootScope.concessionLoadingScreen = true;
    }])

Answer 2

During the config phase, only providers can be injected.

Basically angularjs first invoke the config method and then invoke the run method. During config only providers are available. A provider can then be used to create service instance. So, you can use .run to inject $rootScope.

For example, the following is not allowed:

myMod.config(function(greeting) {
  // WON'T WORK -- greeting is an *instance* of a service.
  // Only providers for services can be injected in config blocks.
});

What you do have access to are any providers for services you've made:

myMod.config(function(greetingProvider) {
  // ok fine!
});

All the best.

Answer 3

You can not use $rootScope during the configuration phase of an angular application.

Only constant and provider can be injected to the configuration phase.

You can use run phase, or create a provider (that is actually a service) to hold the configuration you want.

// Option 1 - during run
angular
    .module('yourApp')
    .run(['$rootScope', function($rootScope) {
    }])

// Option 2 - provider
angular
    .module('yourApp')
    .provider('yourSettings', function() {
        var $this = this;

        this.yourSettings = 'yourValue';

        this.$get = function() {
            return $this;
        }
    })
angular
    .module('yourApp')
    .config(['yourSettingsProvider', function(yourSettingsProvider) {
        // You can use yourSettingsProvider.yourSettings 
    }])