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

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

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

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

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

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

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

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

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

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

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

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

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

$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 });
                }
            }
        }
    })
]);

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

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});
      }
    }
})

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

<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 - это всего лишь небольшой фрагмент кода, и он работает :-)

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

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

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