How to provide configuration to AngularJS module?

Question

Currently I am combining a traditional application with some dynamic parts written using AngularJS. I would like to provide some configuration from my server to my module. In this case I would like to configure the application 'base' URL. All templates can be found at a specific location and this location is determined by the server.

So I tried something like this:

angularForm.config(
 function($routeProvider, TemplateLocator) {
    $routeProvider.when('/', {
        controller : TestController,
        templateUrl : TemplateLocator.getTemplate('FormOuterContainer')
 });
});

At the server:

<script type="text/javascript">
 angular.module('BoekingsModule.config', []).provider('TemplateLocator', function() {
        this.$get = function() {
            return // something
        }

        this.getTemplate = function(name) { return 'location...'; }
    });
 </script>

However, I am not sure this is the right way. So in short: how can I provide some (external) configuration to a module without having to change the module itself?

Answer 1

There are several things you can do

1. Render the locations in the js on the server.

   Pro: less requests -> better performance (usually)

   Cons:

   • combining server side rendering with an SPA makes the system more complex, leading to higher maintenance costs.
   • it is harder to properly compress your js files if you want to mix in server side rendering, embedding js in html is also ugly.

2. Extract the template location to a service.

   From this service you could use a $resource to fetch the data from the server in json format. This keeps things simpler, but it could also increase your web server's load.