Question

在第一次点击页面时，我想将完全呈现的页面发送回用户。如果禁用了javascript，这可以正常工作，但是如果启用了javascript，则angular-ui-router会查找状态并在现有内容之上呈现为ui-view。有没有办法在第一页加载时禁用它？

请参阅此问题：https://github.com/angular-ui/ui-router/issues/1807建议使用$ urlRouterProvider.deferIntercept（），但我找不到有关使用它的文档，也不确定如何拦截第一页加载。

Answer 1

有两个部分：首先，您需要禁用路由器在第一页加载时加入。这可以这样做：

app.config(function($httpProvider, $urlRouterProvider) {
  // On the first page load disable ui-router so that
  // our server rendered page is not reloaded based on the window location.
  $urlRouterProvider.deferIntercept();
});

其次我们需要正确设置ui-view：在ui-view中转储服务器呈现的标记会导致第一个控制器运行两次时出现奇怪的行为（参见https://github.com/angular-ui/ui-router/issues/1807），所以我们＆＃39 ; ll在ui-view div之后添加我们的服务器渲染标记并隐藏ui-view直到导航事件。

<div ng-controller="PropertyDetailCtrl">
  <div class="ng-cloak" ng-show="!isFirstPageLoad" ui-view></div>

  <div ng-show="isFirstPageLoad">
    (server rendered markup goes here)
  </div>
</div>

现在我们需要在$ scope中设置isFirstPageLoad：

app.controller('PropertyDetailCtrl', function loader($rootScope, $scope) {
  $scope.isFirstPageLoad = true;

  $rootScope.$on('$viewContentLoading', function(event, viewConfig) {
    $scope.isFirstPageLoad = false;
  });
});

我们已经使用ng-cloak确保页面在javascript被禁用时表现完美，所以现在我们已经完全服务器端呈现第一页加载，所有后续导航都由ui-router处理

防止angular-ui-router在首页加载时重新加载ui-view

1 个答案: