Taking control of your templates using $templateCache

[00:00] Templates are obviously a fundamental part of any modern Web application. One of the pieces that Angular uses, behind the scenes to handle templates is called the "templateCache." To examine how this works, right now we have a custom component here called "my-button." That's defined here.

[00:20] All we're defining, really, is just the templateURL. We're pointing to ./tpl.html, which of course is going to look for a file relative to here, which we have set here. If we look at that, it's just a button tag. It says "Mine" inside of it. We can go look at this app. That's exactly what we get. We get a button that says "Mine."

[00:44] We can see our code here, but what we can actually do, if we were to change this, let's make this something that's not quite as selfish and use a template called "yours." If we run that, we're actually going to get an error here because there's no file with that name.

[01:01] We don't actually want to go and create that file even. We're just going to directly modify the templateCache. What we have here is a run function, where we're going to have Angular inject the templateCache. We're just going to say "templateCache.put." We're going to give it this path to yours.html. We're going to give it this actual template content. If we now go over here and rerun this, we can see we have this nice, friendly button that says "Yours."

[01:34] We can even take this a step further. We don't even really have to use the faux file path syntax here, we can just call this one "timestamp." We can actually now create a dynamic button that has the timestamp of now inside of a button and name that "timestamp." If we then change this templateURL to just ask for the template named "timestamp," save that, and go refresh it, we now have a button that each time the app runs, it gives you the current timestamp.

[02:15] If you have used anything like the HTML-to-JS Grunt plugin or library, that works essentially by reading your files and loading them into the templateCache for you. It creates these run blocks. Actually, I think it creates its own modules, but basically it just fills up that templateCache for you. You can do something like this. If you're using common JS and something like Browserify, then you can actually do things like templates slash whatever.

[02:50] Since that will happen synchronously during your build, you can actually manually build up the templateCache like that just by reading files, or you could obviously automate that with a script that would read a directory or that sort of thing. That's how Angular templates work behind the scenes.