Inject constant to other modules config using Angular JS

Question

I would like to share some variables like base paths throughout my application. These variables needs to be accessible during module configuration. My opinion was, that I can use a constant or provider for that.

I've got several modules and each one has it's own routing configuration. In these routing configurations, I want to access some settings for example.

This is working for the app-module-configuration but not for other module-configurations (for controllers on other modules it does), I always get "Unknown provider: info from myApp.orders".

var myApp = angular.module('myApp', ['myApp.orders']);    myApp.constant('info', {    version : '1.0'  });    myApp.config(function(info) {    console.log('app config: ' + info.version);  });    myApp.controller('MyController', function (info) {    console.log('controller: ' + info.version);  });    var orders = angular.module('myApp.orders', []);    // Remove comments to see it fail.    //orders.config(function(info) {  //  console.log('orders config: ' + info.version);  //});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>      <div ng-app="myApp" class="container" ng-controller="MyController">            </div>

I guess I have just missed out a little detail, do you have an idea?

Answer 1

Your info constant is defined in your myApp module. If I understand your question correctly, you'd like to use the constants in other modules (e.g. myApp.orders module). If so, then you need to inject myApp into myApp.orders, but it looks like you want to do the reverse. One solution is to decouple the constants into a standalone module, and inject it as a dependency where needed.

angular.module('constants', [])    .constant(...);  angular.module('myApp', ['constants', 'myApp.orders'])   ...  angular.module('myApp.orders', ['constants'])   ... 

Answer 2

I don't know if my solution is the most pretty, but I put in my index.html a definition of a CONFIG that I reference from other components. I generate my index.html with server side code so I can set the values when the program starts. That is, I use index.cshtml but it just as easily be index.php or other technology. Here is what my index.html looks like:

....   <script type="text/javascript">     var usingMockDataGlobal = true;  </script>  ....   <script type="text/javascript">          (function () {             'use strict';              var configData = {                   codeCampType: 'angu',                  loggedInUsername: 'peter',                 mockData: usingMockDataGlobal             };             angular.module('baseApp').constant('CONFIG', configData);           })();     </script>