From two ways of Creating AngularJS Controllers wh

Question

In most demos below method is given

First Method:

function MyCtrl( $scope ){

$scope.someValue = "All your base are belong to us!";

}

Second Method:

app.controller("MyController",funciton( $scope ){

  $scope.someValue = "All your base are belong to us!";

});

What are the pros and cons of using either method?

Answer 1

The difference is that the second version defines the controller in your app space. Thus the app.controller call. Difference is that afaik you can only use the controller inside of an ng-app="yourApp" instead of everywhere on the site.

Answer 2

I would highly recommend the second one.

The reason behind this is minification. Angular will try to match the controller's name you call in the templates via ng-controller, e.g.:

<div ng-controller="Controller">
   <!-- [...] -->
</div>

Suppose you have a controller like this:

function Controller($scope) {};

and minify it (with some minifiers), you'll get an output like this:

function c(s) {};

Quick EDIT: I checked it with uglify - it will preserve your function name (and you'll be fine), I used a maven based minifier in a project of mine, which actually mangled the method names (I guess I have to replace it)

Your app might just break from that.

Therefore it is recommended to use strings as identifiers for controllers (and injections, etc.) like this:

var app = angular.module("module", []);
app.controller("Controller", ['$scope', function(scope) {

}]);

This will stop a minifier from breaking the app. The reason to put injections like this is as follows:

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

function Ctrl($scope, $location) {
   $scope.test = 42;
};

will get minified to (by UglifyJS):

function Ctrl(a){a.test=2}var app=angular.module("module",[])

and Angular will not know that you need the $scope here.

If minification does not matter to you, you can use either one, as the question really just breaks down to maintainability and readability. Also, if you have multiple modules with controllers, the second one will not get you into trouble.

Answer 3

I'll try to give a quick summary each options pros and cons.

1) The following version is often used in examples around the web because it's easy to write. I wouldn't recommend it in real code however, for two reasons. First of all it can break horribly if you minify your code (and you should), secondly you are littering with globals which is generally bad form and encourages sloppy dependencies that are hard to test.

function MyCtrl( $scope ){
  $scope.someValue = "All your base are belong to us!";
}

---

2) The second version you wrote is better. It contains the function on the app which is good, but it can still break from some minifiers.

app.controller("MyController",function( $scope ){
  $scope.someValue = "All your base are belong to us!";
});

---

3) To make it better, lets do this instead. Note that the function is now inside a list with its dependencies. This "double" naming of the dependencies helps angular keep track of things in minified code.

app.controller("MyController", ['$scope', function( $scope ){
  $scope.someValue = "All your base are belong to us!";
}]);

---

4) You can also inject your dependencies after your controller, something like this. This should also be safe from minifiers as far as I know (I haven't used this version myself).

app.controller("MyController",function( $scope ){
  $scope.someValue = "All your base are belong to us!";
}).$inject = ['$scope'];

---

So 3 and 4 are the best ones. They survive minifying and they allow you to easily mock out any dependency when writing tests. As far as I know the difference between 3 and 4 is cosmetic so both should work equally fine. I personally use 3, I think it looks slightly nicer :)

Answer 4

Personally, I like more the 2nd method, because it is easier to review the code and it is more maintainable, those are just my thoughts.But with 1st method you can put it as a controller in other apps.

Here is what I found from

http://www.bennadel.com/blog/2421-Creating-AngularJS-Controllers-With-Instance-Methods.htm

In most AngularJS demos, you will see Controllers being defined as free-standing JavaScript functions:

function MyCtrl( $scope ){

    $scope.someValue = "All your base are belong to us!";

}

These functions are then referenced in the View using the ngController directive:


<div ng-controller="MyCtrl">

    {{ someValue }}

</div>

NOTE: You should never ever abbreviate "Controller" as "Ctrl". I am only doing that here because this it is what you will typically see in a demo. You should try to avoid abbreviations as much as humanly possible when naming things in programming.

The expression used to define the ngController directive is the name of the Controller in your dependency injection (DI) framework. In an AngularJS application, the dependency injection framework is provided directly by AngularJS. This means that, rather than using a free-standing function, we can use the AngularJS controller() method to define our Controllers:


// Define "MyController" for the Dependency Injection framework
// being used by our application.
app.controller(
    "MyController",
    funciton( $scope ){

        $scope.someValue = "All your base are belong to us!";

    }
);

Here, we are defining the controller as an identifier - MyController - and a constructor function. And, once we can do this, we can get much more fine-tuned in how we actually define our constructor function.