Je remarque que sur un rafraîchissement complet de mon application angulaire, les transitions de l'état (j'utilise l'UI-routeur, mais peuvent également être similaires à un routage angulaire natif également) ont un léger retard sur la première visite car le navigateur a une demande d'accès récupérer le partiel HTML associé à cet état donné. Toutes les visites ultérieures sont fondamentalement instantanées, mais je veux savoir s'il existe un moyen de dire angulaire de pré-charger toutes les partielles nécessaires lors de la première arrivée à la page?
Ne faites-ils pas cela parce que finalement trop de partiels utiliseraient trop de bande passante si elle est extraite en parallèle?
3 Réponses :
Vous pouvez mettre ces partiels à l'intérieur d'une étiquette de script et placer dans votre page HTML principale afin qu'ils soient tous chargés à l'avance. Vous pouvez également les charger dans le bloc d'exécution de votre application et les mettre dans le ou obtenez-le du serveur si ce n'est pas en ligne:
$ templateCache :
$ templatecache.put ('template.html', ' mon modèle ');
$ http.get ('template.html', {cache: $ templatecache});
Hey Désolé n'a pas vu votre réponse. Je vais probablement utiliser ce dernier et simplement obtenir les partiels lors de l'initialisation des applications. Cela a le plus de sens. Merci!
Pour précharger des modèles à l'initialisation de l'application, vous pouvez utiliser:
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});
}
});
}
]);
Voici une solution qui va faire exactement cela et traitera toutes les vues définies.
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);
}])