CODEWITHSUNDEEP
angularjscontroller
dragonmnl
dragonmnl

Reputation: 15538

AngularJS controller: what is the right syntax?

I usually declare one controller this way:

.controller('myController', function($scope,/*other dependecies go here*/){
    // controller definition
};

However in some examples (including one from AngularJS's official documentation) I found something like:

angular.module('controllerExample', [])
  .controller('SettingsController2', ['$scope', SettingsController2]);

function SettingsController2($scope) {
     // controller definition
};

or simply (which is equivalent, I guess):

angular.module('controllerExample', [])
  .controller('SettingsController2', ['$scope', function(){
     // controller definition
   }
]);

Now, I don't understand what is the actual difference between snippet 1) and snippets 2) and 3)

Also, I don't understand why sometimes the same dependency is both outside the function definition and in function parameters (like snippet 3) ) but outside is without $ and inside is with (sorry I can't find an example now. But I'm sure I had this situation).

Thank you in advance

Upvotes: 0

Views: 47

Answers (2)

Neil Smith
Neil Smith

Reputation: 2565

@jwimmer's answer is correct but I want to offer one more possibility. You can clean up the syntax a bit and keep your code minification safe using $inject.

someCtrl.$inject = ['$scope', 'someDependency'];
function someCtrl($scope, someDependency) {
    ...
}

angular.module('someApp')
    .controller('someCtrl', someCtrl);

Upvotes: 2

jwimmer
jwimmer

Reputation: 209

The array syntax is to prevent angular from breaking when the code goes through a minifier. If you are not minifying your javascript, there really isn't a big difference other than you get to type more/less. Angular reads in these functions as a string and processes them. Some minifiers screw that up, so that weird syntax is the current solution.

Upvotes: 4

Related Questions