00:01 HTML2JS is a tool you use as part of your build process to convert your templates into strings that you then store in your template cache. For example, this application loads in this home template for the default state.
00:39 I'll go ahead and install NG-HTML2JS globally so I can just show it from the command line here. You'd typically set this up in Grunt or Gulp or something, but it's easy to show in the command line and just show you what's going on because I can just do NG-HTML2JS, point to my template, and then hit enter.
01:03 You can see in the output here that it just basically prints out what it's going to output. It's going to create a module named the exact same thing that I passed in, and then store in the template cache my entire template as a string.
01:17 I could basically just output that to a file called templates.js, open that in my editor, and you can see what it looks like. Now, this file is ready to be concatenated to our app.js file. The only thing is that in my templates.js, my module is called templates/home.html, and I'd have to copy and paste that into this module loading here.
01:41 Instead, I can actually just pass in a parameter. I can say --module, name the module app, hit enter, and you can see when I go into my templates here that it now renamed this to app. It'll check to see if app already exists, and if it does, it'll grab a copy of it and then store that template into my template cache.
02:04 Now I'm just going to go ahead and concatenate these two files together, app.js and templates.js, using Uglify. I'll say uglify js app.js templates.js and output to build/bundle.js, hit enter, and you can see I've created a bundle here, I'll reformat this a bit so you can see it, that just has that same code.
02:32 Now it's these two files concatenated together. In my index, if I point this, instead of app.js, I'll just say build/bundle, hit save, and now when I refresh, you'll see in the network tab that I'm no longer loading in that home.html.
02:53 I'll expand this out, I'll click on bundle, and you can see it's now getting the template from the template cache because its stored it as a string in there. This works because template URL actually checks the template cache for a string that matches this before it goes and tries to fetch something from the network.
03:11 It's actually finding this string here from here in the template cache and then loading that string in as a template, and then displaying it for my state that I configured in my UI router. Again, this is something you typically do in either Gulp or Grunt as part of a build step.
03:28 You wouldn't really do this in development that much and you usually wouldn't do it from the command line like this. I just did it that way to show the output and give it a bit more explanation.