angularjs - 防止 angular-ui-router 在第一页加载时重新加载 ui-view

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 中转储服务器呈现的标记会导致第一个 Controller 运行两次时出现奇怪的行为(请参阅 https://github.com/angular-ui/ui-router/issues/1807)，因此我们将添加我们的服务器呈现的标记就在 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 处理。