How to do A/B testing with AngularJS templates?

ab-testing, angularjs

Solution

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;
        });
    }
})

Problem

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?

Original source