IIFE Syntax for Angular Controllers

If you want to be a jedi level coder, you have to be careful to not pollute the global namespace with your methods and properties of your controllers (components in angular 2). It's pretty straightforward to do this, but it's sort of a tricky syntax. Suppose your controller now is ...code..., and this could be how you wrap it in an IIFE:

(function(){
    ...code... 
})()

---

IIFE's Actually Do Make Sense

Really quickly I'll try to break this down so that it makes a little sense, but to do it I'm going to go backwards. Look at the final opening and closing parens. They will make the function execute immediately, hence the words immediately invoked in the name. The closing parent to the left of it wraps everything and corresponds to the very first opening paren in the code. The curly brackets contain all of your executing code (the controller declaration and logic). Then finally, the opening and closing parens to the right of the function keyword just signify that this anonymous function takes no parameters. 

Why to Use It

As I mentioned earlier, using IIFE's allows you to use less global variables and not pollute the global namespace. for more info on this see a style guide link johnpapa's here: ​https://github.com/johnpapa/angular-styleguide#iife

---

A Great Example

I wish I could take credit for this example, but I actually took it from a stack overflow answer from john papa (yes, the same author of the angular style guide!). Original link to that stack question is here: http://stackoverflow.com/questions/25644973/iife-in-angularjs. 

snippet of html:​

<div ng-controller="MyCtrl as vm">
     <select ng-options="vm.someOptions" 
        ng-model="vm.someModel" 
        ng-change="vm.myFunction()"></select>
</div>

javascript controller:

(function(){
    angular.module('myapp').controller('MyCtrl', MyCtrl);

    function MyCtrl() {
        var vm = this;

        vm.someModel; 
        vm.someOptions = []; // set these
        vm.myFunction = myFunction;

        activate();

        function activate() {
            myFunction();
        }

        function myFunction() {
            // TODO: will be called onchange and
            // when controller starts
        }

    }

})();