Как предварительно загрузить шаблон в Angular UI-маршрутизаторе?

Я использую Angular UI-маршрутизатор. У меня есть много таких шаблонов:

var access = {
        name: 'access',
        templateUrl: 'app/access/partials/a1.html',
    };

Страница, обслуживаемая Access, зависит от содержимого.

Есть ли способ, которым я мог бы объединить все эти HTML файлы в один и предварительно загрузить файлы, чтобы каждое действие не включало другой запрос? Я понял, что могу разместить свой HTML непосредственно внутри шаблона, но могу ли я объединить HTML из нескольких шаблонов в один файл и все ли он предварительно загружен, чтобы он был готов, когда это было необходимо?

ОТВЕТЫ

Ответ 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>

Ответ 2

Почему бы не использовать ng-include в главном html файле для загрузки всего html сразу.

Что-то вроде этого...

<div ng-repeat="template in templates">
                <ng-include src="template.url"></ng-include>             
            </div>

Итак, здесь шаблоны представляют собой массив объектов, который содержит все url другие шаблоны, которые вы хотите загрузить сразу в файле main.html.

Ответ 3

Легко. Создайте их как ng-template:

<script type="text/ng-template" id="app/access/partials/a1.html">
    Content of the template.
</script>

Ответ 4

Существует уже grunt-angular-templates плагин grunt, специфичный только для этой задачи angular. Я использую его какое-то время. этот плагин автоматически кэширует ваши HTML-шаблоны с помощью $templateCache в одном файле, который вы можете добавить в свое приложение.

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