0

As an example, we have this index.html code:

<!DOCTYPE html>
<html ng-app="sample">
    <head>
    ...
    </head>
    <body>
        <div ng-controller="myController">
        ...
        <script src="js/modules/app.js"></script>
        </div>
    </body>
</html>

and in app.js we have a module and a controller:

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

// controller here

So my question is that, I have seen controllers defined in two types, as a controller, and as a plain function:

app.controller('myController', function(args){
...
});

or

var myController = function(args){
...
};

Which one should be used and why? I have mostly seen the first one used in Angular-based code, but even in tutorials I have come across the second. I personally don't use the second, as I have read it 'pollutes the global namespace'.

Another question I have is that I have seen this kind of usage for a controller:

app.controller('myController', ['$scope', '$http', function($scope, $http) {
...
}]);

Why do we need the array? Can't we make do with just the arguments?

4

4 Answers 4

2

According to the Angular the array annotation based dependency injection or definition is the preferred way:

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

See Inline Array Annotation

This is the preferred way to annotate application components. This is how the examples in the documentation are written.

While at the other hand, the simplest way to get hold of the dependencies is to assume that the function parameter names are the names of the dependencies (which is not preferred for like production app).

someModule.controller('MyController', function($scope, greeter) {
  // ...
});

The Angular can infer the names of the services to inject by examining the function declaration and extracting the parameter names. In the above example, $scope and greeter are two services which need to be injected into the function.

However this method will not work with JavaScript minifiers/obfuscators because of how they rename parameters.

The resulting code after minification will be like this:

someModule.controller('MyController', function(a, b) {
  // ...
});

So now, the Angular does not know what is the dependency a & b while if you use the array annotation based, the output will be:

someModule.controller('MyController',['$scope','greeter', function(a,b) {
  // ...
}]);

So, now Angular can map a with $scope and b with greeter and will be able to resolve the dependency.

1
  • Thanks! The part with the minifiers makes sense. We usually deal with full code, so I guess nobody writes them differently in full code, even though they technically can.
    – cst1992
    Dec 23, 2015 at 9:10
1
app.controller('myController', ['$scope', '$http', function($scope, $http) {

This is done to prevent JS minifiers from breaking your code, because angular relies on names for dependency resolutions.

As for the two styles of controller

app.controller('myController', function(args){
...
});

vs

var myController = function(args){
...
};
app.controller('myController', myController);

It's a matter of personal taste. There's no functional difference.

10
  • Part of my question is what'll happen if I forget to include the line app.controller('myController', myController);. I have seen people doing that.
    – cst1992
    Dec 23, 2015 at 8:58
  • @cst1992: nothing will happen. Your controller won't be defined. Without this line, the function is just a function, hanging out there, unused. Dec 23, 2015 at 8:59
  • Won't it be a problem if the scope of the function is more than what app's should be? So the ng-controller will be able to access the myController function, but anything outside app will be too(which should be a problem).
    – cst1992
    Dec 23, 2015 at 9:24
  • @cst1992: not sure what you mean there. Dec 23, 2015 at 12:24
  • I mean if you don't write the app.controller part, anything outside <... ng-app> should also be able to access mainController, although only Angular should be allowed to access it, and hence it shouldn't be defined as a regular function. Is this correct, if you take my original post into consideration?
    – cst1992
    Dec 23, 2015 at 15:28
0

The first question is mostly about style, since both methods are correct. There might be arguments about both ways of defining controllers and other Angular modules. But as it is with every language in Software Development: Find a coding style and stick to it. Inconsistencies are the real problem. Here's a good style guide to stick to: https://github.com/johnpapa/angular-styleguide

The second question has to do with minification. Please read this article: http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/

0

Syntax for Controllers

The most preferred way for Angular 1.x version is to use Controller As syntax. Please see code below:

(function () {
    'use strict';

    angular.module('app.controllers')
        .controller('HeadController', HeadController);

    HeadController.$inject = ['someService'];

    function HeadController(someService) {
        /* jshint validthis: true */
        var vm = this;

        vm.logout = action;

        function action() {
            someService.doSomeAction();
        }
    }

})();

In your html it will be used like this:

<div ng-controller="HeadController as vm">
    <a href ng-click="vm.logout();" id="item-btn-logout"><i class="icon-off">
</div>

I prefer this syntax. This will let you not to use scope in your views.

Take a look at John Papa AngularJS guide - it is good!

If you are still thinking that it's too complicated and you ain't gonna need it - refer to this article that explains how to avoid Scope Soup in Angular.

Why do we need the array?

Array with plain text is used during injection of dependencies. This will let you minify your code easily and not to lose dependency names during initialization process. If you are not going to do this and minify your code - you are risking that your code won't work.

7
  • There's nothing about "controller as" in your snippet. That's a different syntax. Dec 23, 2015 at 8:21
  • @SergioTulentsev yep, I've missed that. Thanks for that, updated answer.
    – Yuri
    Dec 23, 2015 at 8:25
  • Still, he asks about syntax for defining controllers. Which is totally separate from syntax of using them. Dec 23, 2015 at 8:35
  • @SergioTulentsev There is syntax for both (define controller and use them) what is wrong with it? Also I've attached link to take a look in more details. In my opinion - this syntax and usage are the best.
    – Yuri
    Dec 23, 2015 at 8:38
  • Your first part answers some another question entirely, not one asked by the OP. He didn't mention scope even once! This is still useful info, just irrelevant. Dec 23, 2015 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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