Используя Grunt html2js и concat, как мне сослаться на html-файл из файла concat js

У меня очень большое модульное приложение AngularJS. Я настраиваю Grunt для создания одного JS-файла из нескольких html-файлов с помощью html2js.

    html2js: {
        options: {
            base: 'dol',
            module: 'dol.templates',
            singleModule: true,
            useStrict: true,
            htmlmin: {
                collapseBooleanAttributes: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true
            }
        },
        main: {
            src: ['app/modules/reporting/views/*.html'],
            dest: 'tmp/templates.js'
        }
    },

Затем я запускаю concat для всех моих файлов js и только что созданного файла templates.js:

    concat: {
        options: {
            separator: ';'
        },

        dist: {
            src: ['tmp/*.js', 'app/app.js', 'app/app.controller.js', 'app/common/directives/directives.js', 'app/app.factory.js', 'app/modules/reporting/controllers/reports.controller.js', 'app/modules/reporting/reports.routes.js', 'app/xenon.custom.js'],
            dest: 'dist/app.js'
        }
    },

Теперь у меня есть один файл со всеми моими файлами js и html: app.js

Я ссылаюсь на этот файл dist/app.js в своем index.html.

Проблема, с которой я сталкиваюсь, заключается в том, что внутри моего приложения я ссылаюсь на некоторые файлы HTML, например:

// Layout Related Directives
directive('reportsSummary', function () {
    return {
        restrict: 'E',
        templateUrl: appHelper.templatePath('modules/reporting/views/reportssummary.view')
    };
}).
directive('reportsSidebarMenu', function () {
    return {
        restrict: 'E',
        templateUrl: appHelper.templatePath('modules/reporting/views/reports.sidebar.menu')
    };
}).
directive('reportsFooter', function () {
    return {
        restrict: 'E',
        templateUrl: appHelper.templatePath('modules/reporting/views/reports.footer')
    };
});

Когда я запускаю свое развернутое приложение, я получаю сообщение об ошибке, в котором говорится, что оно не может найти эти файлы. Когда я запускаю свое приложение локально, оно работает нормально, потому что файлы находятся по правильным путям.

Вопрос: как при развертывании приложения ссылаться на эти html-файлы в моем коде, поскольку они теперь находятся в dist/app.js?

Я также ссылаюсь на файлы html в своем ui-router: (function () { 'use strict';

angular
    .module('dol')
    .config(reportsConfig);

reportsConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

function reportsConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/reports');

    $stateProvider.state('reports',
        {
            url: '/reports',
            templateUrl: 'app/modules/reportspage/views/reports.view.html',
            controller: 'reportsController'
        });
}

})();


person anad2312    schedule 10.07.2015    source источник
comment
Вы пробовали npmjs.com/package/grunt-text-replace?   -  person heartyporridge    schedule 10.07.2015


Ответы (1)


Попробуйте использовать ngtemplates в своей задаче grunt:

https://www.npmjs.com/package/grunt-angular-templates

person Preston Van Loon    schedule 10.07.2015
comment
Я не хочу кэшировать шаблоны. Кроме того, если я объединим их все в один файл .js, как мой пользовательский интерфейс получит доступ к этому html-файлу из только что созданного файла app.js? Мой ui-router использует этот относительный путь для поиска файла html: templateUrl: 'app/modules/reportspage/views/reports.view.html' Теперь, когда весь мой html объединен в один файл в файле dist/app.js, как мой пользовательский интерфейс узнает, что нужно искать в файле dist/app.js по указанному относительному пути? Когда я запускаю его локально, все html-файлы существуют, но когда я объединяю html-файлы при развертывании, я использую dist/app.js. - person anad2312; 10.07.2015
comment
Почему вы не хотите кэшировать шаблоны? Кэш шаблона, по сути, говорит, что если вы ищете app/modules/reportspage/views/reports.view.html, вот он, и возвращает тело html-страницы. - person Preston Van Loon; 11.07.2015