Question

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

他们不这样做是因为如果并行获取太多的部分会占用过多的带宽吗？

Answer 1

您可以将这些部分放在脚本标记中，然后将其放在主HTML页面中，这样它们就可以预先加载。您也可以在应用的运行块中加载它们，并将它们放在$templateCache：

中

$templateCache.put('template.html', '<h1>My template</h1>');

如果它不是内联的，请从服务器获取：

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

Answer 2

要在应用程序初始化时预加载模板，您可以使用：

angular
.module('app')
.run(['$state', '$templateCache', '$http',
    function ($state, $templateCache, $http) {
        angular.forEach($state.get(), function (state, key) {
            if (state.templateUrl !== undefined && state.preload !== false) {
                $http.get(state.templateUrl, {cache: $templateCache});
            }
        });
    }
]);

除非在状态定义中设置preload: false，否则默认情况下会预加载所有templateUrls。

感谢Sobieck对该概念的回答here，我将其修改为与ui-router一起使用。

Answer 3

这是一个解决方案，可以处理任何已定义的视图。

run(['$state', '$templateCache', '$http', function($state, $templateCache, $http) {
    var url;
    function preload(v){
        if(v.preload){
            if(url = v.templateUrl){
                $http.get(url, { cache: $templateCache });
            }
        }
        // state has multiple views. See if they need to be preloaded.
        if(v.views){
            for(var i in v.views){
                // I have seen views with a views property.
                // Not sure if it's standard but won't hurt to support them
                preload(v.views[i]);
            }
        }
    }
    $state.get().forEach(preload);
}])

默认情况下，您可以通过将第4行（if(v.preload){）替换为if(v.preload === false){来轻松将其更改为预加载。

基于this answer。

将HTML部分预加载到AngularJS UI-Router应用程序中

3 个答案: