view for smoother navigation

2018-06-27 21:32:24

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

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.

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

链接地址: http://www.djcxy.com/p/77966.html

上一篇: ui路由器vs ngroute for sinlge页面应用程序

下一篇: 查看平滑导航