Предварительные загрузки частичных файлов HTML в приложение UL-маршрутизатора AngularJS

Question

Я заметил, что при полном обновлении моего углового приложения переходы состояния (я использую ui-router, но затем могут быть похожими на собственную угловую маршрутизацию) имеют небольшую задержку на первый браузер, потому что браузер выполняет запрос GET для извлечения частичного HTML, связанного с данным состоянием. Все последующие посещения в основном мгновенные, но я хочу знать, есть ли способ сказать Angular, чтобы предварительно загрузить все необходимые частичные при первом приходе на страницу?

Неужели они не делают этого, потому что слишком много частичных элементов будут использовать слишком большую пропускную способность, если они будут выбраны параллельно?

Answer 1

Вы можете поместить эти частичные части внутри тега сценария и поместить его на главную страницу HTML, чтобы они были загружены спереди. Вы также можете загрузить их в блок запуска вашего приложения, и поместить их в $templateCache:

$templateCache.put('template.html', '<h1>My template</h1>');

Или получить его с сервера, если это не встроенный:

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

Answer 2

Для шаблоны предварительной загрузки при инициализации приложения, вы можете использовать:

angular 
.module('app') 
.run(['$state', '$templateCache', '$http', 
    function ($state, $templateCache, $http) { 
     angular.forEach($state.get(), function (state, key) { 
      if (state.templateUrl !== undefined && state.preload !== false) { 
       $http.get(state.templateUrl, {cache: $templateCache}); 
      } 
     }); 
    } 
]); 

Это предварительно загрузит все templa teUrls по умолчанию, если только preload: false не установлен в определении состояния.

Благодаря ответу Sobieck here для концепции, которую я модифицировал для использования с ui-router.

Answer 3

Вот решение, которое будет делать именно это и будет обрабатывать любые определенные виды.

run(['$state', '$templateCache', '$http', function($state, $templateCache, $http) { 
    var url; 
    function preload(v){ 
     if(v.preload){ 
      if(url = v.templateUrl){ 
       $http.get(url, { cache: $templateCache }); 
      } 
     } 
     // state has multiple views. See if they need to be preloaded. 
     if(v.views){ 
      for(var i in v.views){ 
       // I have seen views with a views property. 
       // Not sure if it's standard but won't hurt to support them 
       preload(v.views[i]); 
      } 
     } 
    } 
    $state.get().forEach(preload); 
}]) 

Вы можете легко изменить это для предварительной загрузки по умолчанию, заменив строку 4 (if(v.preload){) с if(v.preload === false){.

Основано на this answer.