Есть ли способ заставить AngularJS загружать частичные файлы в начале, а не при необходимости?

У меня такая настройка маршрута:

var myApp = angular.module('myApp', []).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/landing', {
            templateUrl: '/landing-partial',
            controller: landingController
        }).
        when('/:wkspId/query', {
            templateUrl: '/query-partial',
            controller: queryController
        }).
        otherwise({
            redirectTo: '/landing'
        });
}]);

Я хочу иметь возможность заставить angularjs загружать обе части в начале, а не по запросу.

Является ли это возможным?

Да, для этого есть как минимум 2 решения:

1. Используйте scriptдирективу ( http://docs.angularjs.org/api/ng.directive:script ), чтобы поместить ваши частичные данные в изначально загруженный HTML.
2. Вы также можете заполнить $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) из JavaScript, если необходимо (возможно, в зависимости от результата $httpвызова)

Если вы хотите использовать метод (2) для заполнения, $templateCacheвы можете сделать это следующим образом:

$templateCache.put('second.html', '<b>Second</b> template');

Конечно, содержимое шаблонов могло поступить по $httpвызову:

$http.get('third.html', {cache:$templateCache});

Вот пример этих техник: http://plnkr.co/edit/J6Y2dc?p=preview

Если вы используете Grunt для сборки своего проекта, существует плагин, который автоматически соберет ваши частичные данные в модуль Angular, который использует $ templateCache. Вы можете объединить этот модуль с остальной частью вашего кода и загрузить все из одного файла при запуске.

https://npmjs.org/package/grunt-html2js

Добавьте задачу сборки для объединения и регистрации ваших html-файлов в файле Angular $templateCache. ( Этот ответ представляет собой более подробный вариант ответа Карлгольда. )

Для grunt используйте шаблоны grunt-angular . Для gulp используйте gulp-angular-templatecache .

Ниже приведены фрагменты конфигурации / кода для иллюстрации.

gruntfile.js Пример:

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

gulpfile.js Пример:

var templateCache = require('gulp-angular-templatecache');
var paths = ['app/partials/.html', 'app/views/.html'];

gulp.task('createTemplateCache', function () {
return gulp.src(paths)
    .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'}))
    .pipe(gulp.dest('app/scripts'));
    });

templates.js (этот файл автоматически создается задачей сборки)

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...

index.html

<script src="app/scripts/templates.js"></script>
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>

Если вы заключите каждый шаблон в тег скрипта, например:

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

Объедините все шаблоны в один большой файл. Если вы используете Visual Studio 2013, загрузите Web Essentials - он добавляет меню правой кнопки мыши для создания пакета HTML.

Добавьте код, который написал этот парень, чтобы изменить $templatecacheсервис angular - это всего лишь небольшой фрагмент кода, и он работает: Суть Войты Джины

Его $http.getнужно изменить, чтобы использовать файл пакета:

allTplPromise = $http.get('templates/templateBundle.min.html').then(

Ваши маршруты templateUrlдолжны выглядеть так:

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

Если вы используете rails, вы можете использовать конвейер ресурсов для компиляции и переноса всех ваших шаблонов haml / erb в модуль шаблона, который можно добавить в файл application.js. Оформить заказ http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Я просто ecoвыполняю работу за себя. ecoпо умолчанию поддерживается Sprockets. Это сокращение от Embedded Coffeescript, который принимает экологический файл и компилируется в файл шаблона Javascript, и этот файл будет обрабатываться как любые другие файлы js, которые есть в папке с ресурсами.

Все, что вам нужно сделать, это создать шаблон с расширением .jst.eco и написать там некоторый html-код, и rails автоматически скомпилирует и обслужит файл с конвейером ресурсов, и способ доступа к шаблону действительно прост: JST['path/to/file']({var: value});где path/to/fileоснован на логическом пути, поэтому, если у вас есть файл /assets/javascript/path/file.jst.eco, вы можете получить доступ к шаблону по адресуJST['path/file']()

Чтобы он работал с angularjs, вы можете передать его в атрибут template вместо templateDir, и он начнет работать волшебным образом!

Вы можете передать $ state своему контроллеру, а затем, когда страница загружается и вызывает геттер в контроллере, вы вызываете $ state.go ('index') или любую другую часть, которую вы хотите загрузить. Выполнено.

Другой метод - использовать кэш приложений HTML5 для однократной загрузки всех файлов и сохранения их в кеше браузера. Ссылка выше содержит гораздо больше информации. Следующая информация взята из статьи:

Измените свой <html>тег, включив в него manifestатрибут:

<html manifest="http://www.example.com/example.mf">

Файл манифеста должен обслуживаться с mime-типом text/cache-manifest.

Простой манифест выглядит примерно так:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

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

1. Пользователь очищает хранилище данных своего браузера для вашего сайта.
2. Файл манифеста изменен. Примечание: обновление файла, указанного в манифесте, не означает, что браузер повторно кэширует этот ресурс. Сам файл манифеста должен быть изменен.