2
<html>
<head>
  [...]
</head>
<body>
  <div ui-view="body">
    <header></header>
    <div ui-view="main">
      Something you see while angular/templates load.
    </div>
    <footer></footer>
  </div>
</body>
</html>

stuff.js

var app = angular.module("app", ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('home', {
    url: '/',
    views: {
      "main": {
        controller: 'HomeController',
        templateUrl: 'home.tpl.html'
      }
    }
  });
  $stateProvider.state('signin', {
    url: '/signin',
    views: {
      "body": {
        controller: 'SigninController',
        templateUrl: 'signin.tpl.html'
      }
    }
  });
}]);

I disabled javascript while making the state transition and this is what I see in the browsers inspector...

<html>
  [...]
  <body>
    <div ui-view="body">
      <header>[...]</header>
      <div ui-view="main">[... home.tpl.html ...]</div>
    </div>
    <div ui-view="body">
      [... signup.tpl.html ...]
    </div>
  </body>
</html>

I was shocked to see that ui-router actually duplicates the ui-view and creates one view before removing the old view.

Obviously this causes the problem that a combination of BOTH views are showing for at least two seconds while navigating from signin to home. This behavior is the same on all tested browsers. Is there a way to tell/force/trick ui-router into completely removing the template of one view before loading another view?

this is similar to: Preventing duplicate ui-view in AngularJS and the answer may apply to my situation as well.

EDIT

the first div had class="ng-enter ng-enter-active" and the next one had class="ng-leave ng-leave-active" answer follows from that.

Community
  • 1
  • 1
user3338098
  • 907
  • 1
  • 17
  • 38

1 Answers1

1

I have noticed this as well. This answer: Angularjs - ng-cloak/ng-show elements blink states that ng-cloak is the ticket, but I haven't been able to get it to work in this scenario.

I'm not sure how you are moving between your routes, but you could set a property on the model used by the first view to true and use ng-show on the entire view with that variable. Then when you're ready to move to the second view, set that variable to false. I'm trying to resolve this myself and will report back if I find a more elegant solution.

Community
  • 1
  • 1
Mike Feltman
  • 5,160
  • 1
  • 17
  • 38
  • 1
    silly me, actually looked at the classes, and realized I had forgotten about ngAnimate being loaded. Obviously they have to be duplicated. – user3338098 Sep 23 '15 at 15:55