angularjs - 如何使用 AngularJS 模板进行 A/B 测试？

Question

我正在使用 ng-boilerplate 并且必须根据用户配置添加在生产中使用不同模板的可能性。

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

我目前的想法是使 templateUrl 动态化

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

并具有多个模板文件，例如:

demo.tpl.html(默认)

demo.b.tpl.html(版本 b)

demo.c.tpl.html(版本 c)

而 userService 函数确实提供了要使用的模板版本，例如“.b”

你同意？是否有更好/更简单的方法来解决这个问题？

Answer 1

AngularJS 标准 $routeProvider 可以接受 templateUrl 的函数。但是你不能将服务注入(inject)这个函数。

ui-router 有 templateProvider参数，你可以注入(inject)你想要的东西，你应该为远程模板案例返回类似这样的东西:

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