Where can I initialize module-wide variables?

Question

I'm trying to do something like this:

angular.module('MyModule', ['ui'])
    .config(function($rootScope) {
        $rootScope.Gender = {
            'M': 'Male',
            'F': 'Female',
            'U': 'Unknown',
        };
    })

But I get this error:

Uncaught Error: Unknown provider: $rootScope from MyModule

If I can't access $rootScope inside my module config, where's the proper place to initialize module-wide variables?

Answer 1

Instead of using $rootScope, you could also use an angular constant or value:

angular.module('MyModule', ['ui']).constant( 'Gender', {
  'M': 'Male',
  'F': 'Female',
  'U': 'Unknown',
});

A constant can never be changed, whereas a value can. And you can inject it wherever you need it:

app.controller( 'MainController', function ( $scope, Gender ) {
  console.log( Gender.M );
});

In my opinion. this seems more "proper" for site-wide variables than using $rootScope.

Answer 2

You can't inject services (here $rootScope) into config block. Only constants and providers can be injected during the config phase.

In your case the correct solution would be to use the run block. Just change config to run and things should be working as expected.