1

HTML テンプレート (別名「パーシャル」) を Angular.js アプリで連結して配布用に縮小する場合、どのようにパッケージ化する必要がありますか? それらをその単一のファイルに含める良い方法はありますか、または、、およびサブディレクトリを含むフォルダーを圧縮する必要がありmain.jsます/templates/*.htmlか/styles/app.css?

Require.js オプティマイザーは、すべての JS ファイルをmyapp.min.js配布に適した 1 つのファイルに圧縮しますが、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 コードベースを 1 つのファイルに縮小する

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 に答える