Something I learned along my Angular journey, and Javascript in general, was the concept of closures.  I really didn’t quite get it, to be honest.  I would leave it, move on and everything worked, so when I had no need to “really use them”, I decided to pass the concept to the side.

It wasn’t until I saw more and more videos and came across a very large Javascript project that I soon understood why closures are so important.  Perhaps your very simply Angular or JS like application will never come to experience a compelling reason to implement closures in your code, but then there may be a time when you are working on something, big or small, and your code just plain stops working.  You get incredibly strange behavior happening and before long you have spent hours and hours trying to figure out just WTF is going on.   Consider your simple client that you make very little money from is using WordPress and you created a simple theme for them.  They went ahead and installed some plugin, simply because it’s their site, their hosting, and well bugger on you, they are free to do what they wish.  Unfortunately, this new plugin has some Javascript library that it uses that also does not use closure and leads to the site breaking.  Sure you could tell your client, sorry, no warranty on your site, it was all working before, and I changed nothing, so it’s your problem now.  If you have any kind of integrity and you care about your quality of service and work then you will take precautions for any strange situations like this from even happening in the first place.

So introducing closures.  This funny looking syntax approach allows your code to be kept in it’s own little safe container, sheltered from other bad code that may break your code completely.  It’s a bit of a bully effect really.  So since we all hate bullies, we protect ourselves simply by avoiding the bully, thus closures.  The simple syntax is like this:

(function() {
// a bunch of Javascript code
})();

The gist of this is the 1st and 3rd line, and pay special attention to the ending () which looks really funky in itself.  This is basically wrapping your JS code into an anonymous function where the ending () executes the code immediately.  It keeps the internal code scoped nicely from the dark world outside, it’s own little happy sandbox to play in with no bullies allowed.

Now you can leave out the ending (), but if you do, then typically you will want to assign the closure code to a variable to somewhat namespace your code.  Here’s an example:

var someObj = (function() {
// a bunch of Javascript code
});

The idea here is when you refer to any methods etc in your own custom code, you will always prefix it with the someObj (example: someObj.display() if display was an internal method defined).  Since this code is not executing immediately (missing the () ), then you will more than likely want to assign the closure to a variable.

So what you can do is to wrap all of your Angular services, controllers etc into a closure like this:

(function() {
 angular.module('myApp').service("myService", function() {
   this.doSomething = function() {
     console.log("Hello Earth!");
     return 1; 
   }
 });
})();

This is a great pattern to start working with on all of your angular module definitions so that your Angular code is protected, and safe from bullies.

Take a look around the web for more complete examples of closures.