10

I'm using $location.path() to load new view inside my angular web site. My page looks like : 

<html>
<head>
</head>
<body>
<div data-ng-view="" ></div>
</body>
</html>

And I change the ng-view depending on the demands (index, home, login, etc). Some times the navigation seems slow (some glitch stay within the page while 0.1 secs) is there a way to make the navigation instant ?

Also, I tried the ng-animate which improved that feeling but not completely. I guess that preloading my 'views' will be one solution ..

Edit :

Feeling improved by adding : 

myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });
BironDavid
  • 503
  • 5
  • 19

2 Answers2

5

You can use a far superior library for managing states and views such as Angular UI Router.

It has support for pre-loading each resource that is needed in your nested state before rendering it (via the resolve property), in order to avoid flickering of the interface, but you can also load each resource you want individually after you have rendered your view. If you don't want to refactor your app to use ui-router (which imo makes every app far more manageable), then you'd be stuck with using $templateCache and managing the resources of your views manually.

A trick you can try to do is have your view's controller load the resources it needs after having been rendered. Also, maybe you have repeating parts of your app view wise, try to extract them in separate templates and reuse them if you can. If you can split your app in such a way that it doesn't re-render everything every time you change view, it would probably have beneficial effect on rendering speed.

Nikola Yovchev
  • 9,498
  • 4
  • 46
  • 72
  • I found information about it ([link](http://stackoverflow.com/questions/21023763/difference-between-angular-route-and-angular-ui-router)). But it does not tell if angular ui router is faster than ngRoute – BironDavid Apr 23 '14 at 07:05
  • It is more configurable and better overall capabilities (things are done easier and in a more manageable way). It is not necessarily faster, but it is easier to manage and will generally result in a better structured code. And in better structured code it is easier to pinpoint rendering problems. However, it is not a magic bullet that will automatically speed up your app. It is just a slightly better alternative of ngRoute. – Nikola Yovchev Apr 23 '14 at 07:33
3

Thanks to Baba. But I found a solution which does not involve to change my route (and use another library such as Angular UI Router (which is by the way super!))

My solution : preload my templates with the $templateCache and add animation (nice tuto : http://scotch.io/tutorials/javascript/animating-angularjs-apps-ngview + http://daneden.github.io/animate.css/)

BironDavid
  • 503
  • 5
  • 19