Preloading HTML partials in AngularJS UI-Router Anwendung

Question

Ich stelle fest, dass auf einer vollständigen Aktualisierung meiner Winkel app, Zustandsübergänge (I ui-Router verwende aber dann kann auch auf native Angular Routing ähnlich sein) eine leichte Verzögerung auf erster Besuch, da der Browser eine GET-Anfrage zum Abrufen des HTML-Teils, der diesem bestimmten Zustand zugeordnet ist, absetzt. Alle nachfolgenden Besuche sind im Prinzip sofort, aber ich möchte wissen, ob es Angular möglich ist, alle benötigten Teiltöne vorab zu laden, wenn Sie zum ersten Mal auf die Seite kommen.

Tun sie dies nicht, weil schließlich zu viele Teiltöne zu viel Bandbreite verwenden würden, wenn sie parallel abgerufen würden?

Answer 1

Sie könnten diese Partials in ein Skript-Tag einfügen und es in Ihre Haupt-HTML-Seite einfügen, so dass sie alle im Vordergrund geladen sind. Sie könnten auch sie im Laufblock Ihrer App laden, und legen sie in den $templateCache:

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

Oder es vom Server erhalten, wenn es nicht inline ist:

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

Answer 2

zu Vorladeschablonen bei der Anwendungsinitialisierung können Sie verwenden:

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}); 
      } 
     }); 
    } 
]); 

Dies wird alle Templa vorladen TeUrls standardmäßig, es sei denn preload: false ist in der Zustandsdefinition festgelegt.

Dank Sobieck Antwort here für das Konzept, das ich mit ui-router für den Einsatz modifiziert.

Answer 3

Hier ist eine Lösung, die genau das tun wird, und werden alle definierten Ansichten behandeln.

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); 
}]) 

Sie können dies leicht durch eine Linie ersetzt standardmäßig vorzuladen ändern 4 (if(v.preload){) mit if(v.preload === false){.

auf this answer Basierend.