防止angular ui路由器在加载第一页时重新加载ui视图

Question

在第一次点击页面时，我想向用户发送一个完全呈现的页面。如果禁用了javascript，这会很好地工作，但如果启用了javascript，则angular ui路由器会查找状态，并在现有内容的顶部呈现到ui视图中。有没有一种方法可以在第一页加载时禁用它？

请参阅本期：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视图：在ui视图中转储服务器渲染的标记会导致第一个控制器运行两次时出现奇怪的行为（请参阅https://github.com/angular-ui/ui-router/issues/1807)，所以我们将在ui视图div之后添加服务器渲染的标记，并隐藏ui视图，直到出现导航事件。

<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斗篷来确保在禁用javascript的情况下页面表现完美，所以现在我们已经获得了完全服务器端渲染的第一个页面加载，所有后续导航都由ui路由器处理。