web-dev-qa-db-ja.com

AngularJSルーティングを使用するときにテンプレートをプリロードする方法はありますか？

Angularアプリがロードされた後、オフラインで利用できるテンプレートが必要です。

このようなものが理想的です：

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

テンプレートキャッシュサービスがあります： $ templateCache これは、javascriptモジュールにテンプレートをプリロードするために使用できます。

たとえば、ドキュメントから取られた：

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

Htmlファイルからjavascriptモジュールを事前生成するためのうっとうしいタスクさえあります： grunt-angular-templates

別の方法は、おそらく柔軟性が低いですが、インラインテンプレートを使用することです。たとえば、index.htmlで次のようなスクリプトタグを使用します。

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

は、ルート設定の実際のURLと同じ方法で、後でアドレス指定できることを意味します（templateUrl: 'templates/Template1.html'）

43
garst

これは、@ gargcによる回答への追加です。

Scriptタグを使用してテンプレートを指定したくない場合、およびファイルからテンプレートをロードする場合は、次のようなことができます。

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

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

ラマン・サビツキーのアプローチに基づいて、この問題に対する解決策が少し改善されたと思いますが、テンプレートを選択的にロードします。実際には、次のように要求された元の構文が許可されます。

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

モジュールルートで定義されているすべてのテンプレートをプリロードします。

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
Raman Savitski

スクリプトタグで各テンプレートをラップする場合、たとえば：

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

すべてのテンプレートを1つの大きなファイルに連結します。 Visual Studio 2013を使用している場合、Web Essentialsをダウンロード-右クリックメニューを追加してHTMLバンドルを作成

この男がangular $ templatecacheサービスを変更するために書いたコードを追加します-ほんの小さなコードで動作します:-)

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

ルートtemplateUrlは次のようになります。

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