Пакет шаблонов *.html в Require.js Optimizer?

Как следует упаковывать шаблоны HTML (так называемые «частичные») в приложении Angular.js, когда оно объединяется + минимизируется для распространения? Есть ли хороший способ включить их в этот единственный файл или мне следует заархивировать папку, содержащую подкаталоги 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 в один файл


node.js angularjs requirejs
person prototype    schedule 07.11.2013    source источник
comment
Можете ли вы опубликовать пример того, как вы используете шаблоны? Вы должны использовать их через плагин text! для оптимизатора, чтобы связать их. Это означает, что в директивах вам придется использовать объявление template: (вместо templateUrl:) и полагаться на RequireJS для загрузки. Аналогично для маршрутов (но вы также можете ввести промежуточный модуль AMD, который регистрирует шаблоны с помощью $templateCache для очистки кода). Могу поподробнее об этом, если интересно.   -  person Nikos Paraskevopoulos    schedule 07.11.2013
comment
Это была именно подсказка, на которую я надеялся. Если вы опубликуете в качестве ответа, я приму это. Спасибо!   -  person prototype    schedule 07.11.2013

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны использовать шаблоны через плагин 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
        );
    });
});
person Nikos Paraskevopoulos    schedule 07.11.2013
comment
это действительно круто. Я использовал текстовый плагин для RequireJS, но до сих пор не знал, что оптимизатор r.js также будет связывать шаблоны html. - person Alexander Mills; 01.07.2015
comment
просто чтобы убедиться, что я понимаю это - позволяет ли это вам связать шаблоны html с оптимизатором r.js в один файл? Не могли бы вы показать пример того, что может искать файл requirejs.config? - person Alexander Mills; 01.07.2015
comment
Никакой специальной настройки не требуется, вам нужно только убедиться, что Require понимает расположение плагина text!, то есть либо путь (например, require.config({paths: {'text': 'location/of/textjs'}})), либо карту (например, require.config({map: { '*': { 'text': 'location/of/textjs' } } })). - person Nikos Paraskevopoulos; 01.07.2015