Usa cache modello angolare con browserify

Question

Sto costruendo una piccola app angolare con browserify e ui-router. Come io non voglio usare un server, voglio memorizzare tutti i miei modelli usando del angolare $templateCache come questo:

exports.templateCache = ["$templateCache", function($templateCache) { 
    'use strict'; 

    $templateCache.put('partials/someState.html', 
    "myHtmlCode" 
); 
}]; 

per popolare la cache, io uso grugnito di guardare nella mia cartella partials, afferrare tutto il codice HTML e caricarlo nella cache con grunt-angular-templates:

ngtemplates: { 
    myApp: { 
    cwd: 'dist/', 
    src: 'partials/**.html', 
    dest: 'src/js/templates/templates.js', 
    options: { 
     bootstrap: function(module, script) { 
     return 'exports.templateCache = ["$templateCache", function($templateCache) {\n' + 
      script + 
      '}];' 
     } 
    } 
    } 
}, 

ho quindi utilizzare browersify di combinare tutti i miei js insieme:

browserify: { 
    dist: { 
    files: { 
     'dist/js/app.js': [ 
      'src/js/templates/**', 
      'src/app.js' 
      ], 
    } 
    } 
}, 

Questo è wor re fino ad ora ma questo flusso di lavoro mi sembra molto poco maneggevole: ho un passaggio intermedio in cui creo il file templates.js nella mia directory src e ho codice hard-coded nel mio file grunt.

C'è un modo per farlo in modo più elegante? Browserify è dotato di soluzioni integrate per affrontare questo problema?

Answer 1

Prova transform per browserify che ti dà la possibilità di richiedere il file html (ad esempio Stringify). Poi si può richiedere ('yourPartial.html') come stringa:

$templateCache.put('yourPartialId', require('./partials/yourPartial.html')); 

// html file 
<div ng-include=" 'yourPartialId' "></div>  

Answer 2

browserify-ng-html2js è stato progettato per risolvere questo problema.

Basta aggiungere in package.json:

"browserify": { 
    "transform": ["browserify-ng-html2js"] 
} 

E vedrete se cammina colloqui :)