AngularJS function declaration, positioning and nesting

Question

I'm new to AngularJS and I read you can declare function in 2 different ways (perhaps more...):

First:

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

myApp.controller('mainCtrl', function($scope){
    $scope.message = 'Yes';
})

myApp.controller('anotherCtrl', function($scope){
    $scope.message = 'No';
})

Second:

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

myApp
   .controller('mainCtrl', mainCtrl)
   .controller('anotherCtrl', anotherCtrl)

function mainCtrl($scope){
    $scope.message = 'Yes';
}

function anotherCtrl($scope){
    $scope.message = 'No';
}

Using the first method I was able to use different files (i.e.: controllers.js with all the Controllers, directives.js with all directives, etc...).

I tried using the second method and gives error if functions are declared in different files, which make sense because they are called in one file but . On the other hand it's more readable to me as there is less nesting and so forth.

What is the difference?

Matter of taste and style; recommending github.com/toddmotto/angularjs-styleguide#modules for generally accepted, reasonable good practices. — bardzusny
– bardzusny, Commented Dec 13, 2015 at 10:20
The second will also work with different files, just make sure that you have included them in the correct order. So basically you should reference the files that contain the functions before the script in which you are trying to use them. — Darin Dimitrov
– Darin Dimitrov, Commented Dec 13, 2015 at 10:20
Here's a more comprehensive style guide, which is also quite good: github.com/johnpapa/angular-styleguide — wvdz
– wvdz, Commented Dec 13, 2015 at 10:23
@T.J.Crowder I see your deletion suggest, but mine is a question about what is the difference, not a "what would you choose?" question. — Mr.Web
– Mr.Web, Commented Dec 13, 2015 at 10:29

T.J. Crowder · Accepted Answer · 2015-12-13 10:50:06Z

2

What is the difference?

Your First Example

In the first example, you're creating the functions via function expressions as part of your calls to myApp.controller.

It also happens that in your example, the functions are anonymous (they don't have names), but you could make them named if you wanted (unless you need to support IE8 or IE legacy modes that equate to IE8 or earlier):

myApp.controller('mainCtrl', function mainCtrl($scope){
// Gives it a name -------------------^
    $scope.message = 'Yes';
});

(This article on my anemic little blog explains why there are issues with that on IE8 and earlier.)

Since the functions don't have anything referring to them except whatever .controller hooks up, you can't use them elsewhere unless you can get references to them back from myApp, or if you declared a variable and assigned it within the expression making the call:

var mainCtrl;

// ...

myApp.controller('mainCtrl', mainCtrl = function mainCtrl($scope){
    $scope.message = 'Yes';
});

// ...you could use the `mainCtrl` variable here if you needed
// to reuse the function

Your Second Example

In the second example, you're creating the functions via function declarations, and then referring to those functions in your calls to myApp.controller. The functions have names (they're not anonymous). You could use those functions in more than one place, if it made sense to, without doing the variable thing shown above.

In your second example, you could declare the functions in separate files, but in order to use them in your call to myApp.controller, you need to get a reference to them somehow. There are a large number of ways you can do that, from RequireJS to SystemJS to ES2015 modules to Angular modules (I think) or any other AMD mechanism.

edited Dec 13, 2015 at 10:50

answered Dec 13, 2015 at 10:39

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gianmarco Over a year ago

So I followed your advice, and maybe at this point I will switch my code to the secondo example, the thing is, is recommended to use a closure when declaring a new controller (or anything else?) like this: (function myController(){//code})(); ?

T.J. Crowder Over a year ago

@Gianmarco: All JavaScript functions are closures. What you have there is an inline-invoked function expression (IIFE). If you mean, you'd put all of your code defining the controller inside one, I don't know whether that's necessary in the Angular world (I don't "do" Angular). I do that in the non-Angular world, so that I avoid creating globals (in that context the IIFE is also called a "scoping function"). But with modern JS and modules (AMD stuff, or the ES2015 stuff, or -- I think -- ng modules), top-level declarations in your module aren't globals anymore, so I don't think you need it.

Collectives™ on Stack Overflow

AngularJS function declaration, positioning and nesting

1 Answer 1

Your First Example

Your Second Example

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your First Example

Your Second Example

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related