web-dev-qa-db-fra.com

Existe-t-il un moyen de précharger les modèles lors de l'utilisation du routage AngularJS?

Après que l'application Angular est chargée, j'ai besoin que certains modèles soient disponibles hors ligne.

Quelque chose comme ça serait idéal:

$routeProvider
  .when('/p1', {
    controller: controller1,
    templateUrl: 'Template1.html',
    preload: true
  })
angularjsofflineangularjs-routing
43
andersh

Il existe un service de cache de modèles : $ templateCache qui peut être utilisé pour précharger des modèles dans un module javascript.

Par exemple, tiré des documents:

var myApp = angular.module('myApp', []);
  myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

Il y a même une tâche de grognement pour pré-générer un module javascript à partir de fichiers html: grunt-angular-templates

Une autre façon, peut-être moins flexible, utilise des modèles en ligne , par exemple, en ayant une balise de script comme celle-ci dans votre index.html:

<script type="text/ng-template" id="templates/Template1.html">template content</script>

signifie que le modèle peut être traité ultérieurement de la même manière qu'une véritable URL dans votre configuration d'itinéraire (templateUrl: 'templates/Template1.html')

43
garst

Ceci est un ajout à la réponse de @gargc.

Si vous ne souhaitez pas utiliser la balise de script pour spécifier votre modèle et souhaitez charger des modèles à partir de fichiers, vous pouvez faire quelque chose comme ceci:

    myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });
54
andersh

Je pense avoir une solution légèrement améliorée à ce problème basée sur l'approche de Raman Savitski, mais il charge les modèles de manière sélective. Il permet en fait la syntaxe d'origine qui a été demandée comme ceci:

$routeProvider.when('/p1', { controller: controller1, templateUrl: 'Template1.html', preload: true })

Cela vous permet de simplement décorer votre itinéraire et de ne pas avoir à vous soucier de mettre à jour une autre configuration de préchargement ailleurs.

Voici le code qui s'exécute au démarrage:

angular.module('MyApp', []).run([
    '$route', '$templateCache', '$http', (function ($route, $templateCache, $http) {
        var url;
        for (var i in $route.routes) {
            if ($route.routes[i].preload) {
                if (url = $route.routes[i].templateUrl) {
                    $http.get(url, { cache: $templateCache });
                }
            }
        }
    })
]);
27
Thomas Sobieck

Précharge tous les modèles définis dans les routes de module.

angular.module('MyApp', [])
.run(function ($templateCache, $route, $http) {
    var url;
    for(var i in $route.routes)
    {
      if (url = $route.routes[i].templateUrl)
      {
        $http.get(url, {cache: $templateCache});
      }
    }
})
18
Raman Savitski

si vous enveloppez chaque modèle dans une balise de script, par exemple:

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

Concatène tous les modèles en 1 gros fichier. Si vous utilisez Visual Studio 2013, téléchargez les éléments essentiels du Web - il ajoute un menu contextuel pour créer un ensemble HTML

Ajoutez le code que ce type a écrit pour changer le service angular $ templatecache - c'est seulement un petit morceau de code et ça marche :-)

https://Gist.github.com/vojtajina/3354046

Votre routes templateUrl devrait ressembler à ceci:

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );
0
Simon Dowdeswell