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

时间:2013-11-07 04:17:45

标签: node.js angularjs requirejs

当Angular.js应用程序连接+缩小以进行分发时,应如何打包HTML模板(也称为“部分”)?是否有将它们包含在该单个文件中的好方法,还是应该压缩包含main.js/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中查找模板。

所以假设客户端必须将它们放在同一个目录中,这似乎是一个不公平的约束。

Minifying RequireJS Javascript codebase to a single file

1 个答案:

答案 0 :(得分:3)

您必须通过RequireJS的text!插件使用模板。例如。对于指令:

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
        );
    });
});