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

Bir*_*vid 9 angularjs

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

<html>
<head>
</head>
<body>
<div data-ng-view="" ></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

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

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

编辑:

通过添加:改善感觉:

myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });
Run Code Online (Sandbox Code Playgroud)

Nik*_*hev 5

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

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

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


Bir*_*vid 3

感谢爸爸。但我找到了一个不涉及更改我的路线的解决方案(并使用另一个库,例如 Angular UI Router(顺便说一句,这是超级!))

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