Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preload ng-view for smoother navigation

Tags:

angularjs

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 });
    });
like image 654
BironDavid Avatar asked Apr 22 '14 12:04

BironDavid


2 Answers

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.

like image 110
Nikola Yovchev Avatar answered Nov 15 '22 18:11

Nikola Yovchev


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

like image 30
BironDavid Avatar answered Nov 15 '22 16:11

BironDavid