TemplateCache class
Infinite cache service for templates loaded from URLs.
All templates that are loaded from a URL are cached indefinitely in the
TemplateCache the first time they are needed. This includes templates loaded
via ng-include
or via the templateUrl
field on components decorated with
NgComponent.
All attempts that require loading a template from a URL are first checked against this cache. Only when there is a cache miss is a network request attempted.
You are welcome to pre-load / seed the TemplateCache with templates for URLs in advance to avoid the network hit on first load.
There are two ways to seed the TemplateCache – (1) imperatively via and
TemplateCache
service or (2) declaratively in HTML via the <template>
element (handled by NgTemplateElementDirective
).
Here is an example that illustrates both techniques (view in plunker):
Example:
// main.dart
import 'package:angular/angular.dart';
@NgDirective(selector: '[main-controller]')
class LoadTemplateCacheDirective {
LoadTemplateCacheDirective(TemplateCache templateCache, Scope scope) {
// Method 1 (imperative): Via the injected TemplateCache service.
templateCache.put(
'template_1.html', new HttpResponse(200, 't1: My name is {{name}}.'));
scope.name = "chirayu";
}
}
main() {
bootstrapAngular([new AngularModule()..type(LoadTemplateCacheDirective)], 'html');
}
and
<!-- index.html -->
<html>
<head>
<script src="packages/browser/dart.js"></script>
<script src="main.dart" type="application/dart"></script>
<!-- Method 2 (declarative): Via the template directive. -->
<template id="template_2.html" type="text/ng-template">
t2: My name is {{name}}.
</template>
</head>
<body load-template-cache>
template_1.html: <div ng-include="'template_1.html'"></div><br>
template_2.html: <div ng-include="'template_2.html'"></div><br>
</body>
</html>
Neither ng-include
above will result in a network hit. This means that it
isn't necessary for your webserver to even serve those templates.
template_1.html
is preloaded into the TemplateCache imperatively by
LoadTemplateCacheDirective
while template_2.html
is preloaded via the
<template id="template_2.html" type="text/ng-template">
element
declaratively in the <head>
of HTML.
class TemplateCache extends LruCache<String, HttpResponse> { TemplateCache({int capacity}): super(capacity: capacity); }
Extends
Cache<K, V> > LruCache<String, HttpResponse> > TemplateCache
Constructors
Properties
Methods
V get(K key) #
Returns the value for key
from the cache. If key
is not in the cache,
returns null
.
V get(K key) { V value = _entries[key]; if (value != null || _entries.containsKey(key)) { ++_hits; // refresh _entries.remove(key); _entries[key] = value; } else { ++_misses; } return value; }
V put(K key, V value) #
Inserts/Updates the key
in the cache with value
and returns the value.
V put(K key, V value) { // idempotent. needed to refresh an existing key. _entries.remove(key); // _capacity always > 0 but might not be true in some future. if (_capacity > 0 && _capacity == _entries.length) { // drop oldest entry when at capacity // _entries.keys.first is fairly cheap - 2 new calls. _entries.remove(_entries.keys.first); } _entries[key] = value; return value; }
CacheStats stats() #
CacheStats stats() => new CacheStats(capacity, size, _hits, _misses);