How to provide configuration to AngularJS module?

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?

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.

Wow it has been a long time since. I completely forgot about this post.

So, in the end I decided it was better to use another approach. Like iwein said, combining SPA with server side rendering makes the application a lot more complex. Therefore I extracted the SPA part into a separate application which in turn is referenced from (in my case) the JSP.

When my module needs some additional configuration, it gets it using a REST API. This way the SPA part of the application is completely decoupled from the server-side rendered part.