Externalize service configuration in several angular apps that has the same configs

Question

I have several AngularJS apps that they all have some common dependencies like angular-translate. All the angular apps have the same configuration (in app.js) for angular-translate.

I am looking for a way to externalize the configuration of angular-translate in all these apps. In a way that I will make the changes in one place (maybe a service?) and then the configs will be applied to the apps.

Btw, I am new to Angular world, your precise suggestions would be appreciated.

Answer 1

You can create an angular module config function in a separate project that all of your projects in your projects import and use. Angular allows you to have as many module().config functions as you want. The same goes for .run functions.

Example

// Some common file available to all projects
angular.module('common-config', [
  'angular-translate'
  /* other common dependencies here */
]).config(['$translateProvider',
  function ($translateProvider) {
    $translateProvider.preferredLanguage('en');

    // Other configuration here.
  }]);

// App 1
angular.module('app-one', ['common-config']).run(/*...*/);

// App 2
angular.module('app-two', ['common-config']).run(/*...*/);

// App 3
angular.module('app-three', ['common-config']).run(/*...*/);