Why wrap your angular controller code with anonymous function?

Question

I've been seeing a number of people wrapping their controllers with:

function(){
   //CODE
}();

What's the benefit / goal there?

Answer 1

That isn't really anything related directly to Angular, it is a JS pattern know as an Immediately Invoked Function Expression.

It is one of the most useful patterns in JavaScript, primarily because of:

Code Encapsulation

Since functions have closures in JS, we can use this pattern to create private data very easily:

var index = (function iife() {
  var counter = 0; // <-- this is private, only available inside the closure of inner()
  return function inner() {
    return counter++;
  };
})();

console.log(index()); // 0
console.log(index()); // 1
console.log(index()); // 2
console.log(index.counter) // undefined

---

We can also pass arguments into an IIFE, which allows us to control how we access the outside context of our IIFE. For example, to make sure $ is actually the jQuery object within your code:

(function ($) {
    // here have access to the global jQuery as $ regardless of what window.$ is and 
    // how many libraries are trying to use $
})(jQuery);

---

By combining the two ideas above, IIFEs can also be used to implement the module pattern, which is the basis for how RequireJS and NodeJS separate code:

var myModule = (function iife(initData) {
  // we can use initData here to initialize our module if necessary
  
  var module = {};

  // private vars ...
  var privateVar1, privateVar2;

  // private methods ...
  function privateMethod() {
    console.log('yeeey');
  }

  module.somePublicProperty = 1;
  module.somePublicMethod = function() {
    privateMethod();
  };

  return module;
})(/* pass initialization data */);

myModule.somePublicMethod(); // 'yeeey'

Answer 2

The reason you'll find a lot of JavaScript code wrapped in an anonymous function is to isolate it from other code on the page.

The following code will declare a variable called name on a global scope:

var name = "Hello World";

By using that code, any other script on the page attempting to use a variable called name could potentially get an unexpected value of "Hello World" because your script declared it as "Hello World".

By wrapping that code in an anonymous function, you keep the code from conflicting with other variables called name:

(function() {
    var name = "Hello World";
})();

In the example above, name is now only available inside of the scope of the anonymous function. It is not global, and therefore cannot conflict with other code on the page.

By wrapping your Angular module in an anonymous function, you prevent your code from conflicting with other code.

Additionally, other people who may use your code won't have to worry about it changing their global scope.

Answer 3

Everything @nem035 and @tcasey said is correct but it also have another side effect.

If you use tools like Grunt or Gulp it also allow you to have working dists to put in production.

If you do not use Immediate Invoke Pattern you'll most likely have minification problems like:

• State X is already defined!
• Unknown provider
• . . .

I suggest you to wrap all your js modules with this pattern.

I hope I've been helpful.

Answer 4

There are many benefits of you immediately-invoked-function-expression short IIFE and it's best practice to use it. This way each of angular service or controller become isolate and you don't run into global variables as it can happened if you don't use IIFE.

read more about it

Answer 5

IMHO it's not necessary, even superfluous, as most controllers are already functions:

'use strict';

angular.module('MyApp').controller('AboutController', ['$scope'
  function ($scope) {
    $scope.title = 'About Us';
  }
]);