Adding custom methods to angular.module

[00:00] Convenience functions can help you avoid writing the same code over and over again. Imagine I have this hello component over here. I simply want to say "app.directive" and then pass in the name. We'll call it "hello."

[00:12] Then I have to type all this stuff, like a function, return, an object. I have to type "template," and then I'll give it the template of h1, "Hello world" and close it off. That seems like a lot of code for a really simple thing if all I wanted to do was to display "Hello world."

[00:30] What you can actually play around with is creating new functions, like app.quickTemplate. We'll call this one "quick" and pass in the same template here. Just copy and paste.

[00:45] Obviously, this is not going to work because quickTemplate has nothing to do with Angular. It's not going to add anything, so let's go ahead and add a quickTemplate method to the Angular module.

[00:54] The way that you do this is very similar to how you decorate stuff in provider. We'll go ahead and get an original copy of angular.module. Then we can redefine and reassign angular.module to a function with the same parameters. Name, dependencies, and config function are the three that it takes.

[01:14] If you return the original and pass in those same three things, name, dependencies, and config, then your application should still work just fine, because it's doing the exact same thing it did, just recalling the original from what angular.module originally was.

[01:30] If we go ahead and extract the original...We'll call it something like "module"...we can actually add things onto this module. I can say module.quickTemplate is a function that should log out "hi." Now, if I refresh, you can see it actually says "hi." Get that error that quickTemplate isn't defined. Now we get "hi."

[01:57] I'm going to go ahead and cut this out of here, bring it up inside of our quickTemplate, paste it in there, rename a couple things. This is now the temporary copy of the module. This is the name that we'll pass in, and this is the template that we'll pass in. The name comes in through here, and the template comes in through here.

[02:23] This will break our current build, but once we create a template called "quick" and hit save. Now that quick matches up with this, I can refresh. We now have a super-quick way of making templates. I can duplicate a few of these, name this one "one," "two." Create a "one." Create a "two." Refresh and you can see we have those three quickTemplates.

[02:54] To recap, what we did is we added quickTemplate to our module by assigning the angular.module to something called "original." Then we reassigned angular.module to a new function which takes the same parameters. Then we're simply getting an instance of our module by invoking it here, getting the instance, and then adding whatever we want to it.

[03:15] This quickTemplate basically wraps around the typical directive and makes it a bit easier to use. That's why it's a convenience function. It doesn't add any functionality. It just makes it convenient to pass in a name, a template, and to generate a name and a template.