防止在第一頁加載時重新加載ui-view的角度ui路由器

在頁面的第一次命中時，我想將完全呈現的頁面發回給用戶。如果javascript被禁用，這可以正常工作，但如果啓用了javascript，則angular-ui-router將查找狀態並將其呈現到現有內容之上的ui-view中。有沒有辦法在第一頁加載禁用此功能？防止在第一頁加載時重新加載ui-view的角度ui路由器

查看本期：https://github.com/angular-ui/ui-router/issues/1807建議使用$ urlRouterProvider.deferIntercept（），但我無法找到有關使用它的許多文檔，也不知道如何攔截首頁加載。

來源

2015-04-04 Aidan

檢查問題中提供的鏈接：https：//angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouterProvider#methods_deferintercept。它甚至提供了一個例子。確保在引導應用程序的配置期間調用該方法。 – Dom 2015-04-04 12:16:55

這很奇怪，我只是在Chrome瀏覽器中看到一個空白頁面（http://share.aidanlister.com/aYJx），這就是爲什麼我很困惑。 – Aidan 2015-04-05 00:45:24

你如何處理服務器端渲染？ – 2017-02-20 09:24:15

有兩個部分：首先，您需要禁用路由器在第一個頁面加載時踢入。這是可以做到像這樣：

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視圖：傾銷用戶界面視圖裏面的服務器呈現的標記出現問題的原因，第一控制器被運行兩次怪異的行爲（見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>

現在，我們需要設置isFirstPageLoad在$範圍：

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

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

我們使用了NG-斗篷，以確保該頁面的行爲完全如果JavaScript被禁用的，所以現在我們已經獲得了完整的服務器端呈現第一頁加載所有後續導航處理ui路由器。

來源

2015-04-05 02:19:16 Aidan

你有沒有想過如何處理歷史上的前後矛盾？如果我瀏覽到不同的狀態，然後使用返回按鈕返回頁面，並且isFirstPageLoad = true，那麼靜態內容仍然存在，但動態狀態也會加載。 – 2016-08-29 10:13:36

老實說，我從Angular換成了React，並修復了一切...... – Aidan 2016-09-24 23:11:33

防止在第一頁加載時重新加載ui-view的角度ui路由器

回答

相關問題