AngularJS ui-router with templateProvider для тестирования A/B, а не шаблоны рендеринга

Я создал угловое приложение, где я хотел бы случайным образом отобразить два разных вида домашней страницы, когда пользователь обращается к URL-адресу.AngularJS ui-router with templateProvider для тестирования A/B, а не шаблоны рендеринга

Я создал файл app.js со следующим кодом, используя templateProvider для инъекции testService, который несет функцию выбора, чтобы возвращать случайный выбор из двух аргументов. Это ниже:

var myApp = angular.module('myApp', ['ui.router']); 

myApp.service('testService', function(){ 
    function pick() { 
    var i = Math.floor(Math.random() * arguments.length); 
    return arguments[i]; 
    } 
}); 


myApp.config(['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('home', { 
    url: '/', 
    templateProvider: function(testService) { 
     var result = testService.pick('a', 'b'); 
     return '<div ng-include="\'app/home-' + result + '.html\'"></div>'; 
    } 
    }); 
    $urlRouterProvider.otherwise('/'); 
}])

Мой index.html ниже:

<html> 
<head> 
    <title>Get Penta</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="https://unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-app="myApp"> 
    <ui-view></ui-view> 
</body> 
</html>

и мои взгляды дома-а:

<div>Version A</div>

дом-б:

<div>Version B</div>

Однако ни один из шаблонов не является оказаны.

источник

2016-09-28 Sachin Karia

Согласно этой статье: https://github.com/angular-ui/ui-router/wiki

Вы можете сделать это несколькими способами. Я думаю, что ваше использование ng-include терпит неудачу, потому что в основном это делается при загрузке страницы, и для этого уже слишком поздно. Я думаю, что простое решение заключается в использовании templateUrl, как это:

$stateProvider.state('home', { 
    templateUrl: function() { 
     function pick(){ 
      var i = Math.floor(Math.random() * arguments.length); 
      return arguments[i]; 
     } 
     var result = pick('a', 'b'); 
     return 'app/home-' + result + '.html'; 
    } 
})

источник

2016-09-28 14:06:46 Mikkel

, к сожалению, вы не можете внедрить услугу с помощью templateUrl –

Правда, но в этом случае функция выбора настолько мала, что вы можете просто положить его в встроенная функция – Mikkel

Вы правы! Это сработало спасибо! –

AngularJS ui-router with templateProvider для тестирования A/B, а не шаблоны рендеринга

ответ

Смежные вопросы