[Translate] A/b test for AngularJS templates

Editor's note: This article translates from Andrei Bondarev's "A/B testing your AngularJS Templates" published on Medium, Andrei is an engineer, lifelong learner.

If you want to do A/B testing on a single page application template, it is important to create a clean and extensible solution, rather than using conditional language to make the template more confusing, so:

A clean alternative is to create a separate template for each variable, which makes it easier to manage and track specific errors for variables.

In this case, we use Rails in the backend, and the framework uses split to drive the experiment. At the initial extract, our API controller returns the value of the variable by setting the value of the variable to the response header file called "X-variant":

We will create an interceptor to capture this variable value from the HTPP response of the Angular code. The interceptor will see if the variable header exists and pass it to the service that stores the variable value:

Variantservice will simply encapsulate any key-value pairs that we pass to it:

We divide the Sign_up_form.haml into two separate templates:

Now our form instruction will get the template according to the variant value of Variantservice:

Instead of specifying the template or Templateurl in the definition of the directive, it is requested and compiled in the link function. The implementation of this method is written here https://jellekralt.com/2015/08/13/dynamically-load-a-templateurl-in-an-angular-directive/, the core code is as follows:

Now, for the initial data load request to the server, the API returns a variable value that determines which template is rendered (Sign_up_form_a.haml or Sign_up_form_b.haml).

Note: The sample code follows John Papa's style guide: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

This article by Zoran @ Yell Technology compiled, the original link: https://medium.com/@rushing_andrei/ A-b-testing-your-angularjs-templates-part-1-6b7e93f97074#.s7khy1ard

[Translate] A/b test for AngularJS templates