Using ng-html2js to Convert Templates into JavaScript
ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache. This allows you to bundle all of your templates into a single JavaScript file for simpler deployment and faster loading. John walks through using ng-html2js in the terminal to show what it does, but to integrate with either gulp or grunt, use the tool specific module.
[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:15] For example, if you look at what loads when I refresh this page and go into the network tab, you can see that I have a home template here, which is loaded in after the site loads. What we're going to do is we're going to bundle all of our templates up into a single JavaScript file which will save us from loading a whole bunch of files and instead just load one single concatenated file.
[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.