[译]对 AngularJS 模板的A/B测试

编者按：本文翻译自 Andrei Bondarev 在 Medium 上发布的“A/B Testing your AngularJS Templates ”，Andrei 是一名工程师，终身学习者。

 

如果你想对单页面应用程序模板进行A/B测试，创建一个干净的可扩展的解决方案非常重要，而不是用条件语言让模板更混乱，因此：

一个干净的替代方法是为每个变量创建单独的模板，这样代码能更容易地管理和跟踪变量的特定错误。

在这个案例里，我们后端使用 Rails ，框架用 split 来驱动试验。在初始数据提取时，我们的 API 控制器通过将变量值设置为叫做“X-Variant”的响应头文件来返回变量值：

我们将创建一个拦截器来从 Angular 代码的 HTPP 响应中捕获这个变量值。拦截器会查看变量头是否存在，并将其传递给存储变量值的服务：

VariantService 会对我们传递给它的任何键值对进行简单封装：

我们将 sign_up_form.haml 分成两个单独的模板：

 

现在我们的 form 指令将根据 VariantService 的 variant 值获取模板：

不是在指令的定义中指定 template 或 templateUrl ，而是在链接函数中请求并编译模板。这种方法的实现写在这里 https://jellekralt.com/2015/08/13/dynamically-load-a-templateurl-in-an-angular-directive/，核心代码如下：

现在，对服务器的初始数据加载请求， API 将返回一个变量值，该值将确定呈现哪个模板（ sign_up_form_a.haml 或 sign_up_form_b.haml ）。

 

备注：示例代码遵循 John Papa 的风格指南：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

 

本文由 Zoran @ 吆喝科技 编译，原文链接：https://medium.com/@rushing_andrei/a-b-testing-your-angularjs-templates-part-1-6b7e93f97074#.s7khy1ard