将 HTML 部分预加载到 AngularJS UI-Router 应用程序中 [英] Preloading HTML partials into AngularJS UI-Router application

问题描述

我注意到在完全刷新我的 Angular 应用程序时，状态转换(我正在使用 ui-router 但随后可能类似于原生 Angular 路由)在第一次访问时有轻微的延迟，因为浏览器执行了 GET 请求检索与该给定状态关联的 HTML 部分.所有后续访问基本上都是即时的，但我想知道是否有办法告诉 Angular 在第一次进入页面时预加载所有需要的部分?

I notice that on a full refresh of my angular app, state transitions (I am using ui-router but then may be similar to native Angular routing as well) have a slight lag on first visit because the browser does a GET request to retrieve the HTML partial that is associated with that given state. All subsequent visits are basically instantaneous, but I want to know if there is a way to tell Angular to pre-load all the needed partials when first coming to the page?

他们不这样做是因为如果并行获取，最终太多的部分会使用太多的带宽吗?

Do they not do this because eventually too many partials would use too much bandwidth if fetched in parallel?

推荐答案

您可以将这些部分放在脚本标记中，并将其放置在您的主 HTML 页面中，以便它们都预先加载.您也可以在应用程序的运行块中加载它们，并将它们放入 $templateCache:

You could put those partials inside a script tag, and place it in your main HTML page so they're all loaded up front. You could also load them in the run block of your app, and put them in the $templateCache:

$templateCache.put('template.html', '

我的模板

');

如果它不是内联的，则从服务器获取它:

Or get it from the server if it's not inline:

$http.get('template.html', {cache:$templateCache});

这篇关于将 HTML 部分预加载到 AngularJS UI-Router 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！