CODEWITHSUNDEEP
angularjs
swenedo
swenedo

Reputation: 3114

app.controller vs function in angular.js

I'm learning angular.js, and wonder when app.controller("MyCtrl",...) should be used and when function MyCtrl($scope){...} should be used.

I see no big differences between the two approaches in this example (link to a plunker):

index.html:

<body ng-app="myApp">

    <div ng-controller="FirstCtrl as app1">
        <button class="btn" ng-model="app1.count"
                            ng-click="app1.increment()">
        Click to increment</button>
        {{ app1.count }}
    </div>

    <div ng-controller="SecondCtrl">
        <button class="btn" ng-model="count"
                            ng-click="increment()">
        Click to increment</button>
        {{ count }}
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    <script type="text/javascript" src="example.js"></script>
</body>

example.js:

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

app.controller("FirstCtrl",function () {
    this.count = 0;
    this.increment = function (){
        this.count = this.count + 1;
    }
});

function SecondCtrl($scope){
    $scope.count = 0;
    $scope.increment = function (){
        $scope.count = $scope.count + 1;
    }
}

Upvotes: 27

Views: 28331

Answers (3)

Nitish Kumar
Nitish Kumar

Reputation: 4870

Typically, when you create an application you need to set up an initial state for an Angular scope.

Angular applies (in the sense of JavaScript's Function#apply) the controller constructor function to a new Angular scope object, which sets up an initial scope state. This means that Angular never creates instances of the controller type (by invoking the new operator on the controller constructor). Constructors are always applied to an existing scope object.

You set up the initial state of a scope by creating model properties. For example:

function GreetingCtrl($scope) {
  $scope.greeting = 'Hola!';
}

The GreetingCtrl controller creates a greeting model which can be referred to in a template.

NOTE: Many of the examples in the documentation show the creation of functions in the global scope. This is only for demonstration purposes - in a real application you should use the .controller method of your Angular module for your application as follows:

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

myApp.controller('GreetingCtrl', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

Note also that we use the array notation to explicitly specify the dependency of the controller on the $scope service provided by Angular.

For more detail Read this

Upvotes: 12

Steve Kl&#246;sters
Steve Kl&#246;sters

Reputation: 9457

In both of your usages, the recommended approach is to inject $scope and use that (rather than using this, which you can do in the second approach as well).

The difference between approach one and two is in how to support minification. In the former, you can supply an array of injected arguments, whereas in the latter you modify $inject. This is of course a bit technical but it is highly recommended to support minification. See A note on minification in the documentation.

The former also does not name the function in the global scope, which is generally a good thing!

Upvotes: 13

Chandermani
Chandermani

Reputation: 42669

The major reasons for using the module based controller declaration are

  • Support for minification. The second approach breaks when you minify the code as Dependency Injection fails.
  • JavaScript good practice is to minimizing polluting the global namespace and the first syntax help there.

Upvotes: 17

Related Questions