Angular.js-基于环境的动态配置

Question

I have a sample angular APP - app.js

angular
    .module('myUiApp', [
        'restangular',
        'ngRoute',
        'ngCookies',
        'ui.bootstrap',
        'ui.sortable',
        'smart-table',
        'config'
    ])
    .config(function($routeProvider, $httpProvider, $sceProvider, $logProvider, RestangularProvider, config) {
        RestangularProvider.setBaseUrl(config.apiBaseUrl);
        RestangularProvider.setDefaultHeaders({'Content-Type': 'application/json'});
//routing here
.....
});

my Config.js looks like -

angular.module('config', []).service('config', function($location, ENV) {
    return ENV.dev;
});

my constants.js looks like -

'use strict';

 angular.module('config', []).constant('ENV', (function() {
    return {
    dev: {
    appBaseUrl:'http://localhost:9000/',
    apiBaseUrl:'http://localhost:8082/api/'
    }
}
})());

I am getting the error saying, Failed to instantiate module myUiApp due to: [$injector:unpr] Unknown provider: config.

My assumption is injecting config module will invoke the service, which in turn return the json object. any thoughts or suggesstions to do this dynamic config better?

Answer 1

You can only inject providers into an angular .config() block. You're attempting to inject a service , and that is likely the cause of your error.

Also, you have angular.module('config', []) in two different places. This should only be used once to instantiate the module. Use angular.module('config') (without the second argument) subsequently to reference that module.

Answer 2

I would avoid calling the module config , in favor of something that isn't a method used by angular module.config() -- maybe myConfigModule

Secondly, make sure your script includes the constants.js file and the Config.js file before it includes the app.js file

Lastly double check that this situtation is not affecting you:

defining the module twice with angular.module('config', []) ( emphasis on the [ ] ..) When you define the module with the square brackets, you are saying "New Module". In the second file that you include, change it to angular.module('config') -- or, combine the files into this:

angular.module('myConfigModule', [])
.constant('ENV', (function() {
return {
    dev: {
        appBaseUrl:'http://localhost:9000/',
        apiBaseUrl:'http://localhost:8082/api/'
        }
    }
}).service('config', function($location, ENV) {
    return ENV.dev;
});

UPDATE: And typically I see this syntax for controllers, services, anything that is injecting anything else

.service('config', ['$location', 'ENV', function($location, ENV) {
     return ENV.dev;
}]); // see beginning and end of square bracket
//  also add new injected modules to both the array (surrounded by quotes) and the function