编者按:本文翻译自 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