Czy istnieje sposób na wstępne ładowanie szablonów podczas korzystania z routingu AngularJS?

Po załadowaniu aplikacji Angular potrzebuję niektórych szablonów, aby były dostępne w trybie offline.

Coś takiego byłoby idealne: 

$routeProvider
  .when('/p1', {
    controller: controller1,
    templateUrl: 'Template1.html',
    preload: true
  })
Author: andersh, 2013-09-10
Source

5 answers

Istnieje usługa template cache: $templateCache , który może być użyty do wstępnego załadowania szablonów w module javascript.

Na przykład, zaczerpnięte z docs: 

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

Istnieje nawet zadanie grunt do wstępnego wygenerowania modułu javascript z plików html: grunt-angular-templates

Innym sposobem, być może mniej elastycznym, jest użycie szablonów wbudowanych, na przykład posiadanie znacznika skryptu takiego jak ten w indeksie.html: 

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

Oznacza, że szablon można później zaadresować w taki sam sposób, jak prawdziwy adres url w konfiguracji trasy(templateUrl: 'templates/Template1.html')

 43
Author: garst,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-10 09:41:42

To jest dodatek do odpowiedzi autorstwa @gargc.

Jeśli nie chcesz używać znacznika script do określania szablonu, a chcesz ładować szablony z plików, możesz zrobić coś takiego: 

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

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });
 54
Author: andersh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-07 09:05:00

Myślę, że mam nieco ulepszone rozwiązanie tego problemu oparte na podejściu Ramana Savitskiego, ale ładuje szablony selektywnie. W rzeczywistości pozwala na oryginalną składnię, o którą został poproszony w następujący sposób:

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

To pozwala po prostu udekorować trasę i nie martwić się o aktualizację innej konfiguracji wstępnej gdzie indziej.

Oto kod, który uruchamia się przy starcie: 

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 });
                }
            }
        }
    })
]);
 26
Author: Thomas Sobieck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-07 16:33:12

Wstępnie ładuje wszystkie szablony zdefiniowane w trasach modułów.

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});
      }
    }
})
 18
Author: Raman Savitski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-01 12:58:35

Jeśli zawijasz każdy szablon w znacznik skryptu, np: 

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

Połącz wszystkie szablony w jeden duży plik. Jeśli używasz Visual Studio 2013, Pobierz Web essentials-dodaje menu prawym przyciskiem myszy, aby utworzyć pakiet HTML

Dodaj kod, który napisał ten facet, aby zmienić usługę angular $templatecache-to tylko mały kawałek kodu i działa: -)

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

Twój szablon trasy powinien wyglądać tak: 

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );
 0
Author: Simon Dowdeswell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-03 11:00:30