在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最小化为单个文件
你必须通过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 ); }); });