使用角度模板缓存browserify

我正在与browserify和ui-router构建一个小的角度的应用程序。因为我不希望使用一台服务器，我想采用了棱角分明的$templateCache像这样来存储我所有的模板：使用角度模板缓存browserify

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

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

要填充缓存，我用咕噜寻找到我的partials文件夹，抓住所有的HTML并将其加载到缓存与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 + 
      '}];' 
     } 
    } 
    } 
},

然后我用browersify我所有的JS结合在一起：

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

这是窝国王到目前为止，但这个工作流程对我来说看起来非常不便：我有一个中间步骤，我在我的src目录中创建templates.js文件，并且在我的grunt文件中有硬编码的代码。

有没有办法更优雅地做到这一点？ browserify是否有内置的解决方案来解决这个问题？

来源

2014-10-22 Spearfisher

有类似问题的处理。你有没有找到解决方案？ – 2014-11-11 21:43:42

尝试转换为browserify，使您可以要求html文件（例如。Stringify）。然后，你可以要求（“yourPartial.html”）为字符串：

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

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

来源

2015-02-04 09:03:46

browserify-ng-html2js已被设计为解决此问题。

只需添加在的package.json：

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

，你会看到，如果走会谈:)

来源

2015-03-07 20:23:39

还有**'ngify'** [github]（https://github.com/majgis/ngify），另一个Browserify转换。 'browserify（）。transform（require（'ngify'））。bundle（）...' – Elijah 2015-06-04 13:46:07

这两个转换都将文件名指定为模块名称。随着应用程序的增长，这很难使用。 – trysis 2015-07-17 18:08:21

[ngify]（https://www.npmjs.com/package/ngify）刚刚更新以允许相对路径 – 2016-04-10 02:17:08

使用角度模板缓存browserify

回答

相关问题