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

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处理.