Should I protect my Angular controllers/services from global namespace?

Question

Should I protect my Angular controllers/services from global namespace?

I have a controller/services etc defined like the below as an example:

function IndexController($scope, shoppingItems) {
     $scope.items = shoppingItems;
 }

I then wondered whether all my JS should be proteted from the global namespace like so:

 (function() {

     function IndexController($scope, shoppingItems) {
         $scope.items = shoppingItems;
     }
 });

My app no longer works, can you explain if I need to do this or not and if so how to get it working.

Thanks

javascript
angularjs

Answer 1

you're missing a pair of parenthesis at the end, making your function an immediately evaluated function :

(function() {
     function IndexController($scope, shoppingItems) {
         $scope.items = shoppingItems;
     }
 })();

Answer 2

I suggest you use the new style of registering controllers(at least as of 1.0.3, might be 1.0.1 as well)

(function() {
  //this will simulate creating the app with all needed dependencies
  var app = angular.module('app', ['my.dependecy1', 'my.dependecy1']);
  //...init code maybe
});

(function() {
  //this will only retrieve it or create if it it doesn't exist
  //I suggest you create it in another place passing all needed dependencies
  var app = angular.module('app');

  //I also recommend listing injectable variables manually,
  //this way if you ever need minification you're safe
  app.controller('IndexController', ['$scope', 'shoppingItems', 
     function IndexController($scope, shoppingItems) {
         $scope.items = shoppingItems;
     }
  ]);

}());