UDN-企业互联网技术人气社区

板块导航

浏览  : 448
回复  : 2

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

[复制链接]
王许柔的头像 楼主
发表于 2016-12-30 15:30:44 | 显示全部楼层 |阅读模式
本帖最后由 王许柔 于 2016-12-30 15:31 编辑

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

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

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

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

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

  我们将 sign_up_form.haml 分成两个单独的模板:
3.png

  现在我们的 form 指令将根据 VariantService 的 variant 值获取模板:
2.png

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

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

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


相关帖子

发表于 2017-1-5 10:27:22 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-1-6 21:11:42 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部