Ответ 1
Есть ли способ, которым я мог бы объединить все эти HTML файлы в один и предварительно загрузить файлы, чтобы каждое действие не включало другой запрос?
Да, используя html2js;
или, точнее, плагин grunt/ gulp, называемый соответственно grunt-html2js/gulp-html2js
КАК ЭТО РАБОТАЕТ
В соответствии с этим учебник grunt-html2js:
"html2js - это плагин (...), который анализирует все файлы шаблонов в вашем приложении и создает файл javascript, который заполняет $templateCache.
Это очень полезный трюк, чтобы уменьшить количество запросов, которые необходимо сделать вашему приложению для запуска приложения.
Он также может минимизировать фрагменты html, сохраняя некоторые bandwitdh. "
----------
В соответствии с grunt-html2s репозиторий Github:
"html2js преобразует группу шаблонов в JavaScript и собирает их в модуль Angular, который непосредственно кеширует непосредственно при загрузке модуля.
Вы можете объединить этот модуль с вашим основным кодом приложения, чтобы Angular не требовал каких-либо дополнительных запросов сервера для инициализации приложения. "
----------
И по мне:)
Что мне нравится в html2js, так это то, что вам не нужно менять какой-либо код Angular, но просто настройте gruntfile.js/gulpfile.js.
Ваши файлы templateUrl будут automagically доступны в $templateCache.
Итак, он делает именно то, что вы пожелаете:
- Объедините все ваши шаблоны в модуль;
- Напишите исходный код JavaScript для модуля;
Все, что вам нужно сделать, это указать модуль как зависимость в вашем коде.
После загрузки модуля все ваши шаблоны доступны в кеше: запрос не требуется!
ПРИМЕРЫ GRUNT/ GULP CONFIG
grunt.initConfig({
html2js: {
options: {
base: 'app',
module: 'templates',
htmlmin: {
... many available options: see GitHub repo ...
}
},
main: {
src: ['app/**/*.html'],
dest: 'templates.js'
},
},
})
то просто используйте модуль шаблонов в качестве зависимости:
angular.module('myApp', [ 'templates']);
----------
Вот пример из репозитория gulp-html2js GitHub:
gulp.task('scripts', function() {
gulp.src('fixtures/*.html')
.pipe(html2js({
outputModuleName: 'template-test',
useStrict: true
}))
.pipe(concat('template.js'))
.pipe(gulp.dest('./'))
})
ТЕСТИРОВАНИЕ
Что еще, html2js также является очень хорошим инструментом для директив тестирования, которые используют свойство templateUrl.
ДЛЯ ДОПОЛНИТЕЛЬНОЙ ИНФОРМАЦИИ
Я прочитал html2js после прочтения Joel Hooks '( Egghead) книга об автоматизации, которую я настоятельно рекомендую.
Посмотрите выделенное видео о html2js в разделе pro веб-сайта EggHead.
Директивы тестирования с использованием свойства templateUrl с Karma и karma-ng-html2js-preprocessor
Примечание
Технически вы можете просто использовать ng-html2js без использования GULP или Grub; вы могли бы использовать командную строку, как показано ниже:
ng-html2js inputFile [outputFile] [-m moduleName] [--module-var ngModule]
Однако, поскольку вам нужно будет выполнить указанную выше команду для каждого файла templateUrl, автоматизация Gulp/Grub представляется более эффективным способом.
ОТКАЗ
У меня нет особого интереса или доли в книге/веб-сайтах/инструментах, которые я упоминал.
Примечание. Я также должен добавить, вы также добавляете этот файл на страницу html:
<script src="path/to/templates.js"></script>