1

当一个 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.

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

将 RequireJS Javascript 代码库缩小到单个文件

4

1 回答 1

3

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
        );
    });
});
于 2013-11-07T16:01:35.957 回答