Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm kind of new to AngularJS.

In a text on how to use AngularJS modules I came across the following code

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', function ($scope) {

    $scope.text = 'Hello, Angular fanatic.';

In this case we are defining a module. Modules as I get are a way to avoid global variables and they define a scope within the rootscope and act as a container for controllers and other objects.

In the myApp.controller(..) line we are passing the $scope object, and also a function object which uses the $scope object. I do not know why it is required to pass the $scope argument. Why is it not possible to just use the $scope variable directly without injecting it into the controller, which I guess is what the first variable in the array is doing.

When a controller is used in an ng-controller tag, then I guess a $scope is automatically created and appended. In that case, isn't it redundant to pass the $scope.

share|improve this question

4 Answers 4

It is not mandatory to pass the $scope argument in the array, you can do as follows:

myApp.controller('MainCtrl', function ($scope) {

//Your code here

});

If I'm not getting what you meant, than let me know and I'll explain it to you furthermore !

share|improve this answer

You're actually not passing the $scope object as the first thing, you're declaring that your code depends on the $scope object to angular's DI system. Omitting it has the same result, but it doesn't work when minified, which is why the array syntax is preferred for minification.

share|improve this answer

I am also new to AngularJS but I am sure I can answer your question partially.

(1): The first variable in the array is assigning a name to the first argument in the function. That is required for minification. See "A Note on Minification": http://docs.angularjs.org/tutorial/step_05

(2): I am not 100% sure, but I would guess the $scope in the function signature is part of AngularJS approach for dependency injection. In this case, it is using a constructor-based dependency injection.

Keep in mind that there are tree kinds of dependency injection: constructor injection, setter injection, interface injection.

share|improve this answer

As seen in the AngularJs documentation for controllers, you can use a simpler way to set your controllers in your app. Your example can also be written like :

myApp.controller('MainCtrl', function ($scope) {

    $scope.text = 'Hello, Angular fanatic.';

}

More, Angular gives you the possibilty to inject many things as controller arguments in the order you want. So this is also possible to type :

myApp.controller('MainCtrl', function (customService1, customService2, $scope) {

    $scope.text = 'Hello, Angular fanatic.';

}

And the $scope variable will always be right set.

The "array" way to declare your controller is used to avoid problems occuring when you minify your angular scripts, cause minifiers transform '$scope' in something like 'a' then the Angular parsing will fail.

So, you got two solutions :

  • Write your controllers with the 'array' notation if you want to minify your scripts with regular minifiers.

or

  • Write your controllers with the 'simple' notation if you don't minify your scripts OR if you use ng-min or something like that (I recommend this way).
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.