How to do A/B testing with AngularJS templates?

Question

I'm using ng-boilerplate and have to add the possibility to use different templates in production, based on the user configuration.

.config(function config( $stateProvider ) {
 $stateProvider.state( 'demo', {
    url: '/demo',
    views: {
      "main": {
        controller: 'DemoCtrl',
        templateUrl: 'demo/demo.tpl.html'
      }
    }
  });
})

My current idea is to make the templateUrl dynamic

templateUrl: 'demo/demo'+userService.getTemplate()+'.tpl.html'

and having multiple template files, like:

• demo.tpl.html (default)
• demo.b.tpl.html (version b)
• demo.c.tpl.html (version c)

while the userService function does provide the template version to use, e.g. ".b"

Do you agree? Is there maybe a better/easier approach to this problem?

Answer 1

AngularJS standard $routeProvider can accept function for templateUrl. But you can't inject services into this function.

ui-router has templateProvider parameter into which you can inject what you want and you should return something like this for remote template case:

$stateProvider.state('demo', {
    templateProvider: function ($http, $templateCache, $stateParams, userService) {
        var url = 'demo/demo' + userService.getTemplate() + '.tpl.html';
        return $http.get(url, { cache: $templateCache }).then(function (response) {
            return response.data;
        });
    }
})