AngularJS全局变量无法在模块中访问

Question

In my AngularJS project I've got a global variable that contains some data: the domain name and image directory. I need this variable in some views. Here is how the variable looks like and how it is set:

config.js

(function(){
  'use strict';
   var conf = angular.module('stormforsStats.config', ['ngRoute']);

   //SET GENERAL VARIABLES
   conf.value('SERVER_DATA', {
     'BASE_URL': '/',
     'IMG_URL': 'assets/src',
     'API_URL': '../api/'
   });
   conf.value('APP_DATA', {
     'APP_NAME': 'Stormfors Stats',
     'APP_VERSION': '0.1'
   });

   conf.config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/', {
          templateUrl: 'index.html',
          controller: 'ConfCtrl'
      }).otherwise({
          redirectTo: '/'
      });
   }]);

   conf.controller('ConfCtrl', ['$log', '$location', 'SERVER_DATA', function ConfCtrl($log, $location, SERVER_DATA) {
        SERVER_DATA.BASE_URL = $location.absUrl().substring(0, $location.absUrl().length - $location.url().length).replace("#","");
        SERVER_DATA.IMG_URL = SERVER_DATA.BASE_URL + SERVER_DATA.IMG_URL;
   }]);
})();

I already successfully injected the global variable, into one of my other modules like this: header.js

(function(){
  'use strict';
  var header = angular.module('stormforsStats.header', []);

  header.directive("headerBar", [function(){
    return {
      restrict: "E",
      templateUrl: "header/header.html",
      controller: 'HeaderCtrl',
      controllerAs: 'header'
    };
  }]);

  header.controller('HeaderCtrl', ['$log', '$scope', '$location', 'SERVER_DATA', function($log, $scope, $location, SERVER_DATA){
    $log.log('header controller initialized');
    this.imgUrl = SERVER_DATA.IMG_URL;
    this.baseUrl = SERVER_DATA.BASE_URL;
  }]);
})();

In this module I successfully access the variable in the module's template. When I try this in another template, notifications, this also works: notifications.js

(function(){
  'use strict';

  var notifications = angular.module('stormforsStats.notifications', ['ngRoute'])

  notifications.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/notifications', {
      templateUrl: 'parts/pages/notifications/notifications.html',
      controller: 'NotificationsCtrl'
    });
  }])

  notifications.controller('NotificationsCtrl', ['$log', 'SERVER_DATA', function($log, SERVER_DATA) {
    this.imgUrl = SERVER_DATA.IMG_URL;
    this.baseUrl = SERVER_DATA.BASE_URL;
    $log.log('notifications controller: '+this.baseUrl);
    $log.log(SERVER_DATA);
  }]);
})();

The code above successfully logs the variable.

No problem so far, but when I try to inject the variable into a very similar module, it doesn't work. Even when I type a typo in the injections, it doesn't get detected, although the controller is executed and the log in the controller shows: home.js

(function(){
  'use strict';

  var home = angular.module('stormforsStats.home',['ngRoute', 'stormforsStats.factory'])

  home.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'home/home.html',
      controller: 'HomeCtrl',
      controllerAs: 'home'
    });
  }])

  home.controller('HomeCtrl', ['$rootScope', '$scope', '$log', 'dataFactory', 'SERVER_DATA', function($rootScope, $scope, $log, dataFactory, SERVER_DATA) {
    this.imgUrl = SERVER_DATA.IMG_URL;
    this.baseUrl = SERVER_DATA.BASE_URL;
    $log.log('home controller: '+this.baseUrl);
    $log.log(SERVER_DATA);
  }]);
})();

The home.js code does log 'home controller' but nothing about the injected variable. Could anyone help me with this problem, or put me in the right direction? Thanks in advance!

Answer 1

var home = angular.module('stormforsStats.home')

initiates a different module than the module that you initiate with

var conf = angular.module('stormforsStats.conf').

You also didn't add stormforStats.conf to the dependencies of stormforsStats.home so you can't use something that your module doesn't recognises. Add the dependency and it'll be solved ( this should solve it: var home = angular.module('stormforsStats.home',['ngRoute', 'stormforsStats.factory', 'stormforsStats.config']) )

Answer 2

当您的stormforsStats.home模块依赖于stormforsStats.config模块时，然后在模块声明中将其枚举

var home = angular.module('stormforsStats.home',['ngRoute', 'stormforsStats.factory', 'stormforsStats.config'])