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

Angularjs 防止角度ui路由器在第一页加载时重新加载ui视图,angularjs,angular-ui-router,Angularjs,Angular Ui Router,在第一次点击页面时,我希望将完全呈现的页面发送回用户。如果禁用了javascript,这可以正常工作,但如果启用了javascript,angular ui router将查找状态并在现有内容的顶部呈现到ui视图中。有没有办法在第一页加载时禁用此功能 请参阅此问题:它建议使用$urlRouterProvider.deferIntercept(),但我找不到太多关于使用它的文档,也不确定如何拦截第一页加载。有两个部分:首先,您需要禁用路由器在第一页加载时启动。可以这样做: app.config(f

在第一次点击页面时,我希望将完全呈现的页面发送回用户。如果禁用了javascript,这可以正常工作,但如果启用了javascript,angular ui router将查找状态并在现有内容的顶部呈现到ui视图中。有没有办法在第一页加载时禁用此功能


请参阅此问题:它建议使用$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视图:在ui视图中转储服务器呈现的标记会导致第一个控制器运行两次时出现奇怪的行为(请参见),因此我们将在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>

我们已经使用ng-Clope来确保在禁用javascript的情况下页面能够正常运行,因此现在我们得到了一个完全服务器端呈现的第一页加载,所有后续导航都由ui路由器处理。

检查问题中提供的链接:。它甚至提供了一个例子。请确保在引导应用程序配置时调用该方法。这很奇怪,我只是在Chrome()中看到一个空白页,这就是为什么我如此困惑的原因。如何处理服务器端渲染?您是否已经知道如何处理历史中的来回。如果我浏览到不同的状态,然后使用“上一步”按钮返回到isFirstPageLoad=true的页面,那么静态内容仍然存在,但动态状态也被加载。老实说,我从Angular切换到React,这修复了一切。。。
app.controller('PropertyDetailCtrl', function loader($rootScope, $scope) {
  $scope.isFirstPageLoad = true;

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