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