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