Comment mettre le contenu de $ templateCache.put (...) dans un fichier html au lieu d'incorporer html dans Javascript?

Question

L'incorporation de code HTML dans JavaScript comme l'extrait de code suivant n'est pas maintenable lorsque vous avez un fichier app.js et de nombreux modules.

app.js

app.config(['$routeProvider', function($routeProvider){ 
    $routeProvider.when('/first',{ 
    templateUrl: 'partial/first.html', 
    controller: 'FirstCtrl' 
    }); 
}]).run(function($templateCache){ 
    $templateCache.put('partial/first.html', '<p>Hundred lines of Html</p>'); 
    }); 

Est-il possible de migrer ces 100 LoC à partir de $ templateCache.put (...) dans le fichier Html comme nous utilisons templateURL au lieu de modèle? OU suggérer une autre approche pour accomplir ceci parce que je perds le contrôle sur le code. Je veux utiliser $ templateCache pour une récupération rapide.

Answer 1

Vous devez utiliser un script de génération, par ex. avec gulp pour faire ce genre de chose. Il y a un module npm appelé angular-template-cache qui fait exactement ce que vous voulez.

var angularTemplateCache = require('gulp-angular-templatecache'); 

gulp.task('compile:templates',() => 
    gulp.src('/src/**/*.html') 
     .pipe(angularTemplateCache('templates.js')) 
     .pipe(gulp.dest('/dist')) 
); 

Cette tâche engouffreur créerait un fichier qui contient un /dist/templates.js$templateCache.put pour chaque fichier html sous le src dir. Vous pouvez faire cette partie de votre processus de construction avec la minimisation, le contournement du cache, etc.