Question

我创建了一个角度应用，我想在用户访问网址时随机呈现两个不同的主页视图。

我使用templateProvider使用以下代码创建了app.js文件，以注入带有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>

和我的观点家-A：

<div>Version A</div>

家-B：

<div>Version B</div>

但是没有一个模板被渲染。

Answer 1

根据这篇文章：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';
    }
})

AngularJS ui-router，带有templateProvider，用于A / B测试而不是渲染模板

1 个答案: