Comment empaqueter mes modèles angulaires avec grognement et browserify

Question

J'utilise angular1 avec browserify et grunt pour construire l'application. Actuellement, browserify conditionne uniquement les contrôleurs et récupère les modèles en utilisant ng-include dans un appel ajax séparé.

En raison d'un grand nombre d'appels ajax, je veux emballer les modèles ainsi que le javascript.I suis actuellement en utilisant grunt-processhtml pour inclure la sortie de browserify dans mon html. Ce que je dois savoir est comment puis-je générer une sortie comme

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

Où * est un caractère générique de tous les fichiers à l'intérieur templates dossier et ils contiennent le contenu de ce fichier. Merci d'avance de m'avoir aidé.

Answer 1

L'idée est de mettre en cache des modèles HTML en utilisant le service de cache angulaire. Il va injecter tous les modèles dans un fichier JS et chargé en tant que module Angular. Un exemple de contenu du fichier de sortie:

angular.module('app').run(["$templateCache", function($templateCache) { 
    $templateCache.put("home.html", 
     '<h2>This is home page</h2>' // contents for home.html ... 
); 
}); 

premier plugin installer à partir de ce lien:

https://www.npmjs.com/package/grunt-angular-templates

charger ensuite dans grognement:

grunt.loadNpmTasks('grunt-angular-templates'); 

Enfin ajoutez votre configuration ngTemplate. Voici un exemple

ngtemplates: { 
    app:  { 
    src:  '**.html', 
    dest:  'template.js' 
    } 
}