Zapobieganie ponownemu ładowaniu ui-view przy ładowaniu pierwszej strony

Question

Przy pierwszym trafieniu na stronę chcę wysłać użytkownikowi w pełni wyrenderowaną stronę. Działa to dobrze, jeśli javascript jest wyłączony, ale jeśli włączony jest javascript, to kąt-ui-router wyszukuje stan i wyświetla ui-view nad istniejącą treścią. Czy istnieje sposób, aby wyłączyć to na ładowanie pierwszej strony?

Zobacz ten numer: https://github.com/angular-ui/ui-router/issues/1807, który sugeruje użycie $ urlRouterProvider.deferIntercept(), ale nie mogę znaleźć wiele dokumentacji na temat korzystania z niego i nie wiem, jak przechwycić ładowanie pierwszej strony.

Answer 1

Istnieją dwie części: po pierwsze trzeba wyłączyć router od kopania przy pierwszym ładowaniu strony. Można to zrobić tak:

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

drugie musimy skonfigurować UI-view poprawnie: Dumping znaczników serwera-renderowane wewnątrz ui-view powoduje problemy dziwne zachowanie z pierwszego kontrolera prowadzony jest dwa razy (patrz https://github.com/angular-ui/ui-router/issues/1807), więc dodamy nasz znacznik renderowany przez serwer tuż za ui-view div i ukrywamy widok ui, aż pojawi się wydarzenie nawigacyjne.

<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> 

Teraz musimy ustawić isFirstPageLoad w $ zakresie:

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

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

Użyliśmy NG-płaszcz, aby upewnić się, że strona zachowuje się idealnie, gdy JavaScript jest wyłączony, więc teraz mamy otrzymałem ładowanie strony po stronie serwera po pierwszej stronie, a cała kolejna nawigacja obsługiwana przez router Ui.