使用Angular模板缓存和Browserify

Question

我正在使用browserify和ui-router构建一个小型的angular应用程序。由于我不想使用服务器，所以我希望像这样使用angular的$templateCache来存储所有我的模板：

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

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

为了填充缓存，我使用grunt查看我的“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是否带有内置的解决方案？

- Spearfisher

---

处理类似的问题。你找到解决方案了吗？ - Gabriel C. Troia

Answer 1

"browserify-ng-html2js旨在解决这个问题。

只需在package.json中添加：

"

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

如果它言行一致，你就会看到它的表现 :)

- Nicolas Zozol

---

还有一个名为“ngify”的Browserify转换器，它可以在github上找到。使用方法为：browserify().transform(require('ngify')).bundle()... - Elijah

这两个转换都将文件名指定为模块名称。随着应用程序的增长，这使得使用变得困难。 - trysis

ngify 刚刚更新，现在允许使用相对路径。 - Michael Allan Jackson

Answer 2

尝试使用适用于Browserify的Transform，它可以让您要求HTML文件（例如Stringify）。然后，您可以将require（'yourPartial.html'）作为字符串：

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

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

- Jakub Złoczewski