在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最小化为单个文件

Answer 1

你必须通过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 ); }); });