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

On the first hit to a page I want to send a fully rendered page back to the user. This works fine if javascript is disabled, but if javascript is enabled then angular-ui-router looks up the state and renders into ui-view on top of the existing content. Is there a way to disable this on the first page load somehow?

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

See this issue: https://github.com/angular-ui/ui-router/issues/1807 which suggests using $urlRouterProvider.deferIntercept(), but I can't find much documentation about using it and not sure how to intercept the first page load.

看到这个问题:https://github.com/angular-ui/ui-router/issues/1807建议使用$ urlRouterProvider.deferIntercept(),但我找不到很多关于使用它的文档而不确定如何拦截第一页加载。

1 个解决方案

#1

There's two parts: firstly you need to disable the router from kicking in on the first page load. This can be done like so:

有两个部分:首先,你需要禁用路由器在第一页加载时踢。这可以这样做:

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();
});

Secondly we need to set up the ui-view correctly: Dumping the server-rendered markup inside the ui-view causes issues weird behaviour with the first controller being run twice (see https://github.com/angular-ui/ui-router/issues/1807), so we'll add our server rendered markup just after the ui-view div and hide the ui-view until there's a navigation event.

其次,我们需要正确设置ui-view:在ui-view中转储服务器呈现的标记会导致第一个控制器运行两次时出现奇怪的行为(请参阅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>

Now we need to set isFirstPageLoad in the $scope:

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

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

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

We've used ng-cloak to make sure that the page behaves perfectly if javascript is disabled, so now we've got a fully server side rendered first page load with all subsequent navigation handled by ui-router.

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

#1