Есть ли способ предварительно загружать шаблоны при использовании маршрутизации AngularJS?

Ответ 1

Существует служба кэширования шаблонов: $templateCache, которая может использоваться для предварительной загрузки шаблонов в модуль javascript.

Например, взятый из документов:

var myApp = angular.module('myApp', []);
  myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

Есть даже задача grunt, чтобы предварительно создать модуль javascript из html файлов: grunt-angular-templates

Другим способом, возможно, менее гибким, является использование встроенных шаблонов, например, с тегом script, как это в вашем index.html:

<script type="text/ng-template" id="templates/Template1.html">template content</script>

означает, что шаблон может быть адресован позже так же, как реальный URL-адрес в конфигурации вашего маршрута (templateUrl: 'templates/Template1.html')

Ответ 2

Это дополнение к ответу @gargc.

Если вы не хотите использовать тег script для указания вашего шаблона и хотите загрузить шаблоны из файлов, вы можете сделать что-то вроде этого:

    myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });

Ответ 3

Я думаю, что у меня есть немного улучшенное решение этой проблемы на основе подхода Рамана Савицкого, но он выборочно загружает шаблоны. Фактически это разрешает исходный синтаксис, заданный так:

$routeProvider.when('/p1', { controller: controller1, templateUrl: 'Template1.html', preload: true })

Это позволяет вам просто украсить ваш маршрут и не беспокоиться об обновлении другой конфигурации предварительной загрузки в другом месте.

Вот код, который запускается при запуске:

angular.module('MyApp', []).run([
    '$route', '$templateCache', '$http', (function ($route, $templateCache, $http) {
        var url;
        for (var i in $route.routes) {
            if ($route.routes[i].preload) {
                if (url = $route.routes[i].templateUrl) {
                    $http.get(url, { cache: $templateCache });
                }
            }
        }
    })
]);

Ответ 4

Предварительно загружает все шаблоны, определенные в маршрутах модуля.

angular.module('MyApp', [])
.run(function ($templateCache, $route, $http) {
    var url;
    for(var i in $route.routes)
    {
      if (url = $route.routes[i].templateUrl)
      {
        $http.get(url, {cache: $templateCache});
      }
    }
})

Ответ 5

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

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

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

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

https://gist.github.com/vojtajina/3354046

Ваш маршрут templateUrl должен выглядеть следующим образом:

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