Làm cách nào để thử nghiệm A/B với các mẫu AngularJS?

Question

Tôi đang sử dụng ng-boilerplate và phải thêm khả năng sử dụng các mẫu khác nhau trong sản xuất, dựa trên cấu hình người dùng.

.config(function config($stateProvider) { 
$stateProvider.state('demo', { 
    url: '/demo', 
    views: { 
     "main": { 
     controller: 'DemoCtrl', 
     templateUrl: 'demo/demo.tpl.html' 
     } 
    } 
    }); 
}) 

ý tưởng hiện tại của tôi là làm cho templateUrl động

templateUrl: 'demo/demo'+userService.getTemplate()+'.tpl.html' 

và có nhiều file mẫu, như:

• demo.tpl.html (mặc định)
• demo. b.tpl.html (phiên bản b)
• demo.c.tpl.html (phiên bản c)

trong khi chức năng userService cung cấp phiên bản mẫu để sử dụng, ví dụ: ".b"

Bạn có đồng ý không? Có cách tiếp cận nào tốt hơn/dễ hơn cho vấn đề này không?

Answer 1

AngularJS standard $routeProvider có thể chấp nhận chức năng cho templateUrl. Nhưng bạn không thể tiêm dịch vụ vào chức năng này.

ui-router có templateProvider tham số vào đó bạn có thể tiêm những gì bạn muốn và bạn nên quay trở lại một cái gì đó như thế này cho mẫu từ xa trường hợp:

$stateProvider.state('demo', { 
    templateProvider: function ($http, $templateCache, $stateParams, userService) { 
     var url = 'demo/demo' + userService.getTemplate() + '.tpl.html'; 
     return $http.get(url, { cache: $templateCache }).then(function (response) { 
      return response.data; 
     }); 
    } 
}) 

Answer 2

này có thể đạt được sử dụng tiêu chuẩn góc, bạn chỉ cần nhìn vào nó từ góc độ khác!

Tôi khuyên bạn nên sử dụng $templateCache. Khi bạn tải ứng dụng, bạn có thể điền trước bộ nhớ cache mẫu $ với phiên bản mẫu người dùng đã chọn.

Bạn có thể làm một cái gì đó giống như

$templateCache.put("page-header.html", '<h1>MyAwesomeStartup</h1><h2>Buy now!?!?!</h2>'); 

Ngoài ra nếu bạn không phản đối ý tưởng, bạn có thể đặt mẫu vào trang bằng cách sử dụng cú pháp script tag, nơi id == các templateURL bạn sử dụng trong của bạn $ routeProvider.

<script type="text/ng-template" id="page-header.html"> 
    <h1>MyAwesomeStartup</h1><h2>Buy now!?!?!</h2> 
</script> 

Và ng sẽ tải trực tiếp từ thẻ tập lệnh.

Answer 3

Tôi sẽ không lưu giữ dịch vụ vì dịch vụ sẽ là một phần của tệp js. Mà sẽ là tĩnh (dưới điều kiện bình thường)

Đây là cách tôi sẽ làm điều đó, Trong html tập tin tôi sẽ đưa

window.abConfig = "defaultVersion"; 

Trong app.js tôi sẽ đưa

.config(function config($stateProvider) { 
$stateProvider.state('demo', { 
    url: '/demo', 
    views: { 
     "main": { 
     controller: 'DemoCtrl', 
     templateUrl: function() { 
      return 'demo/demo' + window.abConfig + '.tpl.html'; 
     } 
     } 
    } 
    }); 
}) 

loại của nó của cách Hacky, nhưng nó mang lại cho tôi sự linh hoạt để quyết định phiên bản nào sẽ hiển thị cho người dùng ở cấp độ máy chủ. Tôi có thể yêu cầu viết logic trước khi người dùng tải xuống nội dung dựa trên hoạt động trước đó của người dùng, mà tôi không thể làm từ javascript phía máy khách.

Answer 4

Tôi có một cách khác dựa trên cùng một nguyên tắc

Ngoại trừ việc bạn không phải thực sự yêu cầu chế độ xem với $ http.

Vì vậy, bạn có thể cho phép ui-router xử lý phần đó.

Điều này dễ dàng hơn khi bạn có kiến ​​trúc chế độ xem phức tạp.

.state('public.index', { 
      url: '/', 
      views: { 
       "": { 
        template: '<div ui-view="abTestDummyView"></div>', 
        controller: ['landing', '$http', function(landing, $http) { 
         alert('Showing AB Test Landing #' + landing); 
         // increment landing stats 
         $http.get('http://stats.domain.com', {landing: landing}); 
        }], 
        controllerAs: 'landingCtrl', 
       }, 
       "abTestDummyView@public.index": { 
        templateProvider: ['landing', function(landing) { 
         // inject a view based on its name 
         return "<div ui-view=\"ab" + landing + "\"></div>"; 
        }] 
       }, 
       "ab1@public.index": { 
        template: "INJECTED AB1" 
        // replace by templateUrl: "/real path/" 
       }, 
       "ab2@public.index": { 
        template: "INJECTED AB2" 
        // replace by templateUrl: "/real path/" 
       } 
      }, 
      resolve: { 
       landing: function() { 
        return Math.floor((Math.random() * 2) + 1); 
       } 
      } 
     })