У меня очень большое модульное приложение 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'
});
}
})();