Question

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

Answer 1

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;
     }
  ]);

}());