[译]对 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
[译]对 AngularJS 模板的A/B测试的更多相关文章
- Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程01:AngularJS模板 (转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- AngularJS 模板
一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器 ...
- [转载]AngularJS入门教程02:AngularJS模板
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- 「译」JUnit 5 系列:条件测试
原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...
- 6.使用AngularJS模板来创建视图
AngularJS模板包含定义了额外的功能,对DOM元素行为的表达式,过滤器和指令. 1.了解模板 表达式:类似js的代码段.在作用域的上下文被求值.可以放置在普通的HTML文本或属性值中 <p ...
- [译]用AngularJS构建大型ASP.NET单页应用(一)
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...
- [译]用AngularJS构建大型ASP.NET单页应用(三)
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single A ...
- [译]用AngularJS构建大型ASP.NET单页应用(二)
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...
随机推荐
- Strong name signature not valid for this assembly Microsoft.mshtml.dll
Strong name signature not valid for this assembly Microsoft.mshtml.dll http://social.msdn.microsoft ...
- iOS网络基础知识
iOS网络基础知识 1.一次HTTP请求的完整过程 (1)浏览器或应用发起Http请求,请求包含Http请求Http(请求),地址(url),协议(Http1.1)请求为头部 (2)web服务器接收到 ...
- ORACLE中的DECODE函数
今天遇到一个问题,数据库中需要排序的字段是中文,但是有不能按照中文拼音来排序,在网上查到一些资料,完美的解决了问题. DECODE(DS.RANGE_NAME,'高',3,'中',2,'低',1,'潜 ...
- Linux下搭建PHP环境
转载于: http://www.uxtribe.com/php/405.html 该站下有系列PHP文章. 在Linux下搭建PHP环境比Windows下要复杂得多.除了安装Apache,PHP等软件 ...
- 手机浏览器,微信中播放amr录音
由于微信公众号开发中,临时素材只有三天的有效期,但是客户要求所有录音永久保存,永久素材数量又有限制,故只能把录音保存到服务器上.但是存到服务器上有一个问题,手机微信中无法直接播放amr录音.无意中发现 ...
- iOS 里面 NSTimer 防止 循环引用
使用NSTimer的类 #import "TBTimerTestObject.h" #import "TBWeakTimerTarget.h" @interfa ...
- savepoint原理
保存点 在MySQL中, 保存点SAVEPOINT属于事务控制处理部分.利用SAVEPOINT可以回滚指定部分事务,从而使事务处理更加灵活和精细.SAVEPOINT相关的SQL语句如下 SAVEPOI ...
- mongodb( 实现join)
mongodb提供ref和populate的方法,支持类似join的SQL操作.本文给出一个实际的例子: 1. 数据1: var daob = new Schema({ user: { type: S ...
- jQuery实现返回顶部
由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...
- 机械革命 USB装系统各种坑
买了个号称超强性价比的游戏本- 机械革命, i7+ssd+hd+4G RAM+ GTX850M, 很直接, 直接出厂就一个DOS系统,回来要自己装机. 好吧, 先下了个大白菜软件,用来刻录ISO系统到 ...