एंगुलरजेएस टेम्पलेट्स के साथ ए/बी परीक्षण कैसे करें?

Question

मैं एनजी-बॉयलरप्लेट का उपयोग कर रहा हूं और उपयोगकर्ता कॉन्फ़िगरेशन के आधार पर उत्पादन में विभिन्न टेम्पलेट्स का उपयोग करने की संभावना जोड़ना है।

• demo.tpl.html (डिफ़ॉल्ट)
• डेमो:

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

  मेरे वर्तमान विचार templateUrl गतिशील

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

  और की तरह, कई टेम्प्लेट फ़ाइलों होने बनाने के लिए है। b.tpl.html (संस्करण बी)

• demo.c.tpl.html (संस्करण सी)

जबकि उपयोगकर्ता सेवा फ़ंक्शन टेम्पलेट संस्करण का उपयोग करने के लिए प्रदान करता है, उदा। ".b"

क्या आप सहमत हैं? क्या इस समस्या के लिए शायद एक बेहतर/आसान दृष्टिकोण हो सकता है?

Answer 1

कोणीय जेएस मानक $routeProvider टेम्पलेट यूआरएल के लिए फ़ंक्शन स्वीकार कर सकता है। लेकिन आप इस समारोह में सेवाओं को इंजेक्ट नहीं कर सकते हैं।

$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

यह मानक कोणीय का प्रयोग कर प्राप्त किया जा सकता है, तो आप सिर्फ इस पर गौर करने के लिए है:

ui-routertemplateProvider पैरामीटर जिसमें आप इंजेक्षन कर सकते हैं कि आप क्या चाहते हैं और आप दूरस्थ टेम्पलेट मामले के लिए कुछ इस तरह लौट जाना है एक और कोण से!

मैं $templateCache का उपयोग करने का सुझाव दूंगा। जब आप ऐप लोड करते हैं तो आप उपयोगकर्ता टेम्पलेट के चयनित संस्करण के साथ $ टेम्पलेट कैश को पूर्व-पॉप्युलेट कर सकते हैं।

आप की तरह

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

इसके अलावा कुछ कर सकते हैं अपने विचार के खिलाफ नहीं है, तो आप स्क्रिप्ट टैग वाक्य रचना, का उपयोग कर पृष्ठ में टेम्पलेट्स जगह कर सकते हैं, तो जहां आईडी == templateURL आप में उपयोग अपने $ routeProvider।

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

और एनजी इसे सीधे स्क्रिप्ट टैग से लोड करेगा।

Answer 3

मैं इसे सेवा में नहीं रखूंगा, क्योंकि सेवा जेएस फ़ाइल का हिस्सा होगी। जो स्थिर हो जाएगा (सामान्य स्थिति के तहत)

यह मैं इसे कैसे करेंगे, html फ़ाइल में मैं

window.abConfig = "defaultVersion"; 

डाल देंगे app.js में मैं

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

इसकी तरह रखा जाएगा है हैकी तरीके से, लेकिन यह मुझे यह तय करने के लिए लचीलापन देता है कि सर्वर स्तर पर उपयोगकर्ता को कौन सा संस्करण प्रदर्शित करना है। उपयोगकर्ता की पिछली गतिविधि के आधार पर सामग्री डाउनलोड करने से पहले मुझे तर्क लिखने की आवश्यकता हो सकती है, जिसे मैं क्लाइंट साइड जावास्क्रिप्ट से नहीं कर सकता।

Answer 4

मैं इसी सिद्धांत

आप को छोड़कर के आधार पर एक अलग तरह है है वास्तव में $ http साथ दृश्य खुद के लिए अनुरोध करने के लिए नहीं।

तो आप उस हिस्से को यूई-राउटर को संभालने दे सकते हैं।

जब आपके पास जटिल दृश्य आर्किटेक्चर होता है तो यह आसान होता है।

.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); 
       } 
      } 
     })