Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Templating" Lesson is part of the full, Component-Based Architecture in AngularJS 1.x and ES6 course featured in this preview video. Here's what you'd learn in this lesson:

Before getting into automation, Scott explains how templating engines work. Most templating engines combine a template string with a set of options to create dynamic output.

Get Unlimited Access Now

Transcript from the "Templating" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: So what we're gonna do now is we're gonna automate these things. So what I mean by automate, I mean we write the same stuff over, and over, and over again. Like admin, blog, blog post, common home. They all have the same, they definitely have the same files.

[00:00:20] And even in those files they kinda do the same thing, at least for a little bit. Like all directives import styles, and controllers, and templates, and they all export. All controllers are classes and export, right. All JavaScript, all the entry files import Angular and the directive, and register the directive, and then export.

[00:00:40] They also create a module. So there were some common things there. So we can just automate this using gulp. This is a reason why I wanted to use gulp with webpack because if we use webpack we're won't be able to automate this. Webpack, its job is not to do this type of thing that we're about to do, its job is to build files.

[00:00:55] It's not gonna automate a template system for you, whereas gulp will cuz it's just a streaming system. So we're gonna use gulp for that. Now before we do that, because this one's actually kind of complicated that's why I saved it for the last. I wasn't even too sure if I was gonna do it, but I think it's important for everybody to see it.

[00:01:14] Does anybody not have experience with a templating engine? Of any language, doesn't have to be JavaScript. No, you don't have experience with a templating engine? So let's just talk about that for a little bit. This is gonna help you out a little bit. So basics of a templating engine, something like this.

[00:01:33] So we have a function called, let's just say make template. Just imagine there's a function called make template somewhere, okay. And what we do is we'll have like an object.
>> Scott Moss: And it will have some properties on it. Name, hey, all right. And then what we'll do is we'll have a string.

[00:01:55] And let's say the string is just a sentence. My name is. And in this case it's actually just used what JavaScript uses. It used this type of symbol and we'll put name here. The way most templating engines work, especially the one we're gonna be using, it'll use the function makeTemplate or whatever its function is.

[00:02:18] And it'll do something like this. So it will take in the string, oops. I guess I should give these names, right?
>> Scott Moss: It'll take in the string, and then the object. And then what it will do is return the compiled result.
>> Speaker 2: So does Angular have a templating engine?

[00:02:43]
>> Scott Moss: Yes.
>> Speaker 2: When you do.
>> Scott Moss: Yep.
>> Speaker 2: Okay.
>> Scott Moss: That's exactly right. So we're gonna use a very micro one, but a very powerful. It's built into Lodash and it's the exact same thing that's in Underscore. So if you ever used Underscore templates or Lodash templates, it's exact same thing, that's what we're about to use.

[00:02:59] It actually kinda looks like, yeah, it's Underscore and Lodash. If you've used it's the same thing. So that's the methodology behind templating. It's gonna be something like that. Sometimes you'll do something like this. You'll do this and this will return a function compiler. And then you'll say compiler.

[00:03:21]
>> Scott Moss: And then you'll pass in the options at some later time which will return the value. So, but either way, it's the same concept.
>> Scott Moss: But yeah, Angular does the same thing. In fact Angular has a
>> Scott Moss: compile.
>> Speaker 2: Yeah, I've seen that.
>> Scott Moss: Thing that does that with interpolation.

[00:03:45] Cool, so that's the basics of templating. And I just want to give you that context, because most of the stuff you're gonna see in the next step is already there. But I want you to understand what's going on. So to help you out.