Existe-t-il un moyen de charger AngularJS au début et non au besoin?

J’ai une configuration de route comme celle-ci:

var myApp = angular.module('myApp', []). config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/landing', { templateUrl: '/landing-partial', controller: landingController }). when('/:wkspId/query', { templateUrl: '/query-partial', controller: queryController }). otherwise({ redirectTo: '/landing' }); }]); 

Je veux pouvoir faire en sorte que les angularjs téléchargent à la fois les partiels au début et non à la demande.

C’est possible?

Oui, il existe au moins 2 solutions pour cela:

  1. Utilisez la directive de script ( http://docs.angularjs.org/api/ng.directive:script ) pour placer vos partiels dans le code HTML initialement chargé
  2. Vous pouvez également remplir $templateCache ( http://docs.angularjs.org/api/ng.$templateCache ) à partir de JavaScript si nécessaire (éventuellement en fonction du résultat de l’appel $http )

Si vous souhaitez utiliser la méthode (2) pour remplir $templateCache vous pouvez le faire comme ceci:

 $templateCache.put('second.html', 'Second template'); 

Bien sûr, le contenu des modèles peut provenir d’un appel $http :

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

Voici le plunker ces techniques: http://plnkr.co/edit/J6Y2dc?p=preview

Si vous utilisez Grunt pour construire votre projet, il existe un plugin qui assemblera automatiquement vos partiels dans un module Angular qui amorce $ templateCache. Vous pouvez concaténer ce module avec le rest de votre code et tout charger depuis un fichier au démarrage.

https://npmjs.org/package/grunt-html2js

Ajoutez une tâche de compilation pour concaténer et enregistrer vos partals HTML dans le $templateCache angular $templateCache . ( Cette réponse est une variante plus détaillée de la réponse de karlgold. )

Pour les grognements , utilisez des gabarits angulars . Pour gulp , utilisez gulp-angular-templatecache .

Vous trouverez ci-dessous des extraits de configuration / code à illustrer.

Exemple avec gruntfile.js:

 ngtemplates: { app: { src: ['app/partials/**.html', 'app/views/**.html'], dest: 'app/scripts/templates.js' }, options: { module: 'myModule' } } 

Exemple avec gulpfile.js:

 var templateCache = require('gulp-angular-templatecache'); var paths = ['app/partials/.html', 'app/views/.html']; gulp.task('createTemplateCache', function () { return gulp.src(paths) .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'})) .pipe(gulp.dest('app/scripts')); }); 

templates.js (ce fichier est généré automatiquement par la tâche de génération)

 $templateCache.put('app/views/main.html', "
\r"...

index.html

  

Si vous encapsulez chaque modèle dans une balise de script, par exemple:

  

Concaténer 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 permettant de créer un ensemble HTML.

Ajoutez le code que ce gars a écrit pour changer le service angular $templatecache – c’est seulement un petit morceau de code et ça marche: Gist de Vojta Jina

C’est le $http.get qui devrait être changé pour utiliser votre fichier bundle:

 allTplPromise = $http.get('templates/templateBundle.min.html').then( 

Vos routes templateUrl devraient ressembler à ceci:

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

Si vous utilisez des rails, vous pouvez utiliser le pipeline d’actifs pour comstackr et transférer tous vos modèles haml / erb dans un module modèle pouvant être ajouté à votre fichier application.js. Commander http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

J’utilise simplement eco pour faire le travail pour moi. eco est pris en charge par Sprockets par défaut. C’est un raccourci pour Embedded Coffeescript qui prend un fichier eco et le comstack dans un fichier de modèle Javascript, et le fichier sera traité comme n’importe quel autre fichier js que vous avez dans votre dossier de ressources.

Tout ce que vous avez à faire est de créer un modèle avec l’extension .jst.eco et d’y écrire du code html, et les rails comstackront et diffuseront automatiquement le fichier avec le pipeline de ressources, et la manière d’accéder au modèle est très simple: JST['path/to/file']({var: value});path/to/file est basé sur le chemin logique, donc si vous avez un fichier dans /assets/javascript/path/file.jst.eco , vous pouvez accéder au modèle à JST['path/file']()

Pour le faire fonctionner avec angularjs, vous pouvez le passer dans l’atsortingbut template au lieu de templateDir, et cela fonctionnera comme par magie!

Vous pouvez passer $ state à votre contrôleur, puis lorsque la page se charge et appelle le getter dans le contrôleur que vous appelez $ state.go (‘index’) ou quel que soit le partiel que vous souhaitez charger. Terminé.

Une autre méthode consiste à utiliser le cache d’application de HTML5 pour télécharger tous les fichiers une fois et les conserver dans le cache du navigateur. Le lien ci-dessus contient beaucoup plus d’informations. Les informations suivantes proviennent de l’article:

Changez votre pour inclure un atsortingbut manifest :

  

Un fichier manifeste doit être servi avec le text/cache-manifest type mime.

Un simple manifeste ressemble à ceci:

 CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js http://cdn.example.com/scripts/main.js 

Une fois qu’une application est hors ligne, elle rest en cache jusqu’à ce que l’une des opérations suivantes se produise:

  1. L’utilisateur efface le stockage de données de son navigateur pour votre site.
  2. Le fichier manifeste est modifié. Remarque: la mise à jour d’un fichier répertorié dans le manifeste ne signifie pas que le navigateur remettra en cache cette ressource. Le fichier manifeste lui-même doit être modifié.