Impedire l'angolare-ui-router dal ricaricamento della vista ui sul caricamento della prima pagina

Question

Al primo colpo su una pagina voglio inviare una pagina completamente renderizzata all'utente. Funziona bene se javascript è disabilitato, ma se javascript è abilitato, angular-ui-router controlla lo stato e esegue il rendering in ui-view sulla parte superiore del contenuto esistente. C'è un modo per disabilitare questo sulla prima pagina caricare in qualche modo?

Vedere questo numero: https://github.com/angular-ui/ui-router/issues/1807 che suggerisce l'utilizzo di $ urlRouterProvider.deferIntercept(), ma non riesco a trovare molta documentazione sull'utilizzo e non so come intercettare il caricamento della prima pagina.

Answer 1

Ci sono due parti: in primo luogo è necessario disabilitare il router dal kicking sul caricamento della prima pagina. Questo può essere fatto in questo modo:

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

In secondo luogo abbiamo bisogno di impostare la ui-avviso correttamente: Dumping il markup server di rendering all'interno del ui-view provoca problemi di comportamento strano con il primo controller viene eseguito due volte (vedi https://github.com/angular-ui/ui-router/issues/1807), quindi aggiungeremo il markup di rendering del server subito dopo il div dell'interfaccia ui e nascondiamo la vista ui fino a quando non ci sarà un evento di navigazione.

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

Ora abbiamo bisogno di impostare isFirstPageLoad nel $ campo di applicazione:

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

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

Abbiamo utilizzato ng-mantello per fare in modo che la pagina si comporta perfettamente se javascript è disattivato, così ora abbiamo ha ottenuto un caricamento completo della prima pagina del lato server con tutta la successiva navigazione gestita da ui-router.