Prevent angular -ui-router from reloading ui-view when loading the first page

Question

When I first get to the page, I want to send a fully processed page back to the user. This works fine if javascript is disabled, but if javascript is enabled, then angular -ui-router looks at the state and displays in ui-view on top of the existing content. Is there a way to disable this when loading the first page?

See this problem: https://github.com/angular-ui/ui-router/issues/1807 , which suggests using $ urlRouterProvider.deferIntercept (), but I cannot find much usage documentation and are not sure how to intercept loading the first page.

Answer 1

There are two parts: firstly, you need to disconnect the router from loading the first page load. This can be done like this:

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

Secondly, we need to properly configure the ui-view. Resetting the markup created by the server inside the ui-view causes problems with strange behavior when the first controller is first started (see https://github.com/angular-ui/ui-router/issues/1807 ), so we will add our rendering server immediately after the ui-view div and hide the ui-view until a navigation event appears.

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

Now we need to set isFirstPageLoad in the scope $ scope:

 app.controller('PropertyDetailCtrl', function loader($rootScope, $scope) { $scope.isFirstPageLoad = true; $rootScope.$on('$viewContentLoading', function(event, viewConfig) { $scope.isFirstPageLoad = false; }); }); 

We used ng-cloak to make sure the page behaves fine if javascript is disabled, so now we have a full server-side loading of the first page with all subsequent navigation handled by ui-router.