angularjs – 防止angular-ui-router在首页加载时重新加载ui-vie

发布时间：2020-12-17 17:45:44 所属栏目：安全来源：网络整理

导读：在第一次点击页面时,我想将完全呈现的页面发送回用户.如果禁用了 javascript,这可以正常工作,但是如果启用了javascript,则angular-ui-router会查找状态并在现有内容之上呈现为ui-view.有没有办法在第一页加载时以某种方式禁用它？看到这个问题：https://git

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

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

解决方法

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

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),因此我们将在之后添加服务器呈现的标记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处理.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!