0
ユーザーが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>
しかし、いずれのテンプレートもレンダリングされる。この記事によると
が、残念ながらあなたは真のtemplateUrl –
を使用してサービスを注入することはできませんが、この場合にはピック機能はあなただけでそれを置くことができるように小さいですインライン機能 – Mikkel
あなたは正しいです!それがありがとうございました! –