テンプレートをレンダリングしていないA/Bテスト用のtemplateProviderを持つAngularJS ui-router

ユーザーがURLにアクセスしたときに2つの異なるホームページビューをランダムにレンダリングする角度アプリを作成しました。テンプレートをレンダリングしていないA/Bテスト用のtemplateProviderを持つAngularJS ui-router

templateProviderを使用してapp.jsファイルを作成し、2つの引数のランダムな選択を返すpick関数を持つ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>

家庭-B：

<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

あなたは正しいです！それがありがとうございました！ –

テンプレートをレンダリングしていないA/Bテスト用のtemplateProviderを持つAngularJS ui-router

答えて

関連する問題