Is it wrong to define controller in angular wrapped in a function?

Question

I am looking at some code, and I see that it is written as shown below. It doesn't make sense to me. Is it wrong? Why is it written like that? Also, shouldn't the use strict; go at the very top, outside of the code?

(function() {
  'use strict';
  angular.module('itemList', [])
    .component('itemList', {
      templateUrl: 'item-list/item-list.component.html',
      controller: ['Item', ItemController]
  });

  function ItemController(Item) {
    //code
  }
}());

score 5 · Accepted Answer · edited May 23 '17 at 12:08

5

The reason it is wrapped in an IIFE is to keep all declarations like "use strict", functions and variables local to the scope contained within and not set in global namespace

If "use strict" was set global it can affect other unrelated code that my not comply and thus would cause unexpected errors to be thrown

Is it wrong to define controller in...

No. It is a best practice

edited May 23 '17 at 12:08

Community

1
1

answered Jul 20 '16 at 12:45

charlietfl

170,828
13
121
150

score 0 · Answer 2 · edited May 23 '17 at 12:32

It is an "immediately-invoked function expression". The main advantage is to make sure you don't pollute the global namespace when declaring local variable.

var someLeakingVar;

function foo(){
  //do something with someLeakingVar.
}

The problem with the construct above is that any script coming after will be able to reach/modify someLeakingVar.

If you wrap it within the IIFE. You are sure, only the code within the expression is able to reac/modify it

(function(){
  var nonLeakingVar = 'foo';
  //...
})()
//here nonLeakingVar is undefined

In the same way as the 'use strict' statement can be function scoped, you make sure only the code within the IIFE will run in strict mode.

You can find more details:

Is it wrong to define controller in angular wrapped in a function?

2 Answers2