Including global config depending on AngularJS module
I have developed an AngularJS app that uses the browser and injects modules as dependencies into the main app. In all modules, I want to be able to access the global configurations from the routingConfig.js file.
Partial code:
main app.js
var routingConfig = require('./common/config/routingConfig');
module.exports = angular.module('app', [
// modules as dependencies
require('./home/home').name,
require('./login/login').name
]);
module home.js
var HomeCtrl = require('./homeController');
module.exports = angular.module('app.home', [
'home/home.tpl.html',
'ui.router'
])
.config(function config($stateProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeCtrl',
templateUrl: 'home/home.tpl.html',
data: {
pageTitle: 'Home'
/**
* I want to be able to use values from routingConfig here...
*/
}
});
})
.controller('HomeCtrl', ['$scope', HomeCtrl]);
Of course, I could require routingConfig in every module and that would work, but ideally I would just like to require it once and use it globally in the main application and its modules. Any ideas would be much appreciated.
source to share
The solution came to my mind.
1) Create a new module called "app.config" and use the angular constant service ( https://docs.angularjs.org/api/auto/service/ $ provide # constant) to register and use your config:
var routingConfig = require('./common/config/routingConfig');
module.exports = angular.module('app.config', [
])
.constant('routingConfig', routingConfig);
2) Add this module "app.config" to the list of module dependencies in app.js
module.exports = angular.module('app', [
// modules as dependencies
require('./config/routingConfig').name,
require('./home/home').name,
require('./login/login').name
]);
3) Now you can enter routingConfig and use it:
module.exports = angular.module('app.home', [
'home/home.tpl.html',
'ui.router'
])
.config(function config($stateProvider, routingConfig) {
... use routingConfig here...
});
source to share