在Require.js优化器中打包* .html模板?

如何将一个Angular.js应用程序中的HTML模板(又名“partials”)封装在一起,然后将它们连接在一起进行分发? 有没有一种很好的方法将它们包含在单个文件中,还是应该压缩包含main.js ,/ /templates/*.html / /styles/app.css . /templates/*.html/styles/app.css子目录的文件夹?

Require.js优化器将所有JS文件压缩到适合分发的单个文件myapp.min.js ,但HTML文件仍被引用为单个文件。

作为背景,代码位于Node.js服务器中:

 public/ /app/main.js /app/app.js /app/directives/*.js /app/filters/*.js /app/factories/*.js /app/other/*.js /app/templates/*.html 

在运行r.js之后, public/app/**所有文件都对位于不同目录public/build/**双胞胎进行了优化。 但浏览器仍然会在原始位置/app/templates/*.html查找模板。

所以推测客户可能不得不把它们放在同一个目录中,这看起来是不公平的限制。

将RequireJS Javascript codebase最小化为单个文件

       

网上收集的解决方案 "在Require.js优化器中打包* .html模板?"

你必须通过text!使用模板text! RequireJS插件。 例如,对于一个指令:

 define(["text!app/templates/a.html", "myAngularModule"], function(template, myAngularModule) { myAngularModule.directive("theDirective", function() { return { template: template, // NOTE HERE ... }; }); }); 

或路线:

 define(["text!app/templates/a.html", "myAngularModule"], function(template_a, myAngularModule) { myAngularModule.config(function($routeProvider) { $routeProvider.when("some/path", { template: template_a, // NOTE HERE ... }); ... }); }); 

另外,使用templateUrl (以防万一需要):

 define(["text!app/templates/a.html", "myAngularModule"], function(template_a, myAngularModule) { myAngularModule.config(function($routeProvider) { $routeProvider.when("some/path", { templateUrl: "app/templates/a.html", // can be any value actually ... }); ... }); myAngularModule.run(function($templateCache) { $templateCache.put( "app/templates/a.html", // NAME MUST MATCH NAME ABOVE template_a ); }); });