预加载视图以实现更平滑的导航

时间:2014-04-22 12:59:07

标签: angularjs

我正在使用$ location.path()在我的角度网站中加载新视图。 我的页面看起来像:

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

我根据需求(索引,主页,登录等)更改ng-view。 有时导航似乎很慢(页面内有一些小故障,而0.1秒)是否有办法让导航瞬间完成?

另外,我尝试了ng-animate,改善了这种感觉,但并不完全。 我想预加载我的“观点”将是一个解决方案..

编辑:

通过添加:

来改善感觉
myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });

2 个答案:

答案 0 :(得分:5)

您可以使用更高级的库来管理状态和视图,例如Angular UI Router

它支持在渲染之前预先加载嵌套状态中所需的每个资源(通过resolve属性),以避免界面闪烁,但您也可以加载每个资源在渲染视图后单独想要。如果您不想重构您的应用程序以使用ui-router(这使得每个应用程序都更易于管理),那么您将无法使用$ templateCache并手动管理您的视图资源。

您可以尝试做的一个技巧是让您的视图控制器在渲染后加载所需的资源。此外,也许您可​​以明智地重复应用视图的部分,尝试在单独的模板中提取它们并在可能的情况下重复使用它们。如果您可以将应用程序拆分为每次更改视图时都不会重新渲染所有内容,则可能会对渲染速度产生有益影响。

答案 1 :(得分:3)

感谢巴巴。但我找到了一个解决方案,它不涉及改变我的路线(并使用另一个库,如Angular UI路由器(顺便说一下超级!)。

我的解决方案:使用$ templateCache预加载我的模板并添加动画(漂亮的tuto:http://scotch.io/tutorials/javascript/animating-angularjs-apps-ngview + http://daneden.github.io/animate.css/