In Angular 1, we use the $templateCache as a way to avoid XHR'ing down every template from the server as we bootstrap our app. In Angular 2, there doesn't appear to be such a mechanism ready-built.
What I can do is replace XHR in the compiler:
function myXhr() {};
myXhr.prototype.get = function(url) {
return new Promise(function(resolve, reject) {
$.ajax({
url:url,
method:'GET',
success:resolve,
error:reject
});
});
};
ng.platform.browser.bootstrap(MyApp, [
ng.core.provide(ng.compiler.XHR, {useClass:myXhr})
]);
And then adjust my XHR getter to check a local cache first. Is this the preferred approach?
I have become accustomed to using template strings in typescript for all my components. I find having the html and view logic all in one TS file very convenient.
You could also look into a module loader/bundler like JSPM or WebPack. These great build tools pull in all your templates into your builds using module syntax like below:
let html = require('./about.html!text');
@Component({
selector:"my-about",
template:html
})
The cache in Angular2 works as follows:
app layer: method on ViewContainerRef is called (e.g. ViewContainerRef.createComponent).
reflector.registerType registers the component type as an annotation
ComponentResolver.resolveComponent now returns a ComponentFactory
ComponentResolver.resolveComponent first checks the type annotations before returning a Promise
Initial design in Angular 2.0 Alpha:
A ProtoView is a prototypical View that is the result of Template compilation and is used by Angular to efficiently create an instance of this View based on the compiled Template.
RenderProtoViewRef is a counterpart to ProtoViewRef available in the Application Context. But unlike ProtoViewRef, RenderProtoViewRef contains all static nested Proto Views that are recursively merged into a single Render Proto View.
It is no longer possible to implement ng-include. The compiler requires a ComponentDirective in order to compile HTML. Therefore, you cannot compile HTML on its own and include it into a View.
Relevant changes since the initial Angular 2.0 Beta:
Compiler is renamed to ComponentResolver, Compiler.compileInHost has been renamed to ComponentResolver.resolveComponent.
Renderer interface now operates on plain native nodes, instead of RenderElementRefs or RenderViewRefs
AppViewManager is renamed into ViewUtils and is a mere private utility service.
References
Angular2 Rendering Architecture
Angular2 Issue #2604: Compiler.compileInHost should first check the cache before creating DirectiveBinding
Angular2 Tests: Entry Components Integration Spec
Angular2 Tests: Reflector Spec
Angular2 Pull Request #7762: Resolvers now use DI to create Reflector
Angular2 Changelog: 2.0.0-beta.1 - Breaking Changes
All About Angular 2.0
