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

问题描述

我注意到在完全刷新我的角度应用程序后，状态转换(我使用的是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?

推荐答案

您可以将这些部分内容放入script标记中，并将其放置在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', '<h1>My template</h1>');

或者如果不是内联则从服务器获取它:

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

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

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