If you want to keep your template code in a separate html file,  you can use the templateUrl property to tell Angular where to find it.

templateUrl

**John Lindquist**: At a certain point, your templates just get a bit too cumbersome to be just a big long string inside of your directive here. We're going to select it all, cut it out and change this to templateUrl and say zippy.html.

I'm not going to create a zippy html file yet because the first one I'm going to show you how to do this is by creating a script tag and then change to type to ng-template and then set your id to zippy.html. If I just paste what I had inside there, let me hit reformat, and you can see that our script tag is going to have our entire template for what we had before just inside there.

Once I rerun this, it's just going to work as it did before exactly the same. Even though there's binding in here for title, to transclude and everything, it's all inside of script tag which is essentially being loaded into Angular template cache. I couldn't get into that now. That will be for later.

When you include that in your directive using the templateUrl, it's just going to bring it on in and use that in the place of what you load in.

If you want to create a separate file altogether, you can create just an html file, call it zippy. I'm not going to add this to get and then just paste the content in there, reformat it to what's going on and we'll delete this guy. You can see that this will again work the exact same.

One thing to note is that I did have to put this under a local web server. Due to cross domain restrictions and browsers and everything, it's not going to be able to load. It's not going to load this up unless you're inside of a web server so watch for that.

Also, a couple of other gotcha's I don't want to talk about. Let's undo this. I guess you can't undo creation of a file. Delete zippy, the html file. Do Refactor and we'll undo cutting that out, sort it back to here.

One thing to note is if you put the script tag outside of your app, you're going to start getting the "cannot load," "it's not found." It's looking for it but can't find it anywhere because it's not inside of the context of your app.

Again, if you put it down here, it's like, it can't find it. You just have to make sure to include it somewhere inside of your module so it gets loaded in that module template cache.

One thing I see a lot of people do and it's probably a good practice is if you're going to have this inline and preload it in like this, I would just put them at the top. This is just the way to organize them so that's kind of strewn about your module. It's to just have all the templates at the top. You know it through there. You know they're kind of included html files but that's your choice. It's just a personal preference thing.

That's templateUrls. We'll get into more advanced template stuff in a bit.

templateUrl

Share this video with your friends