CODEWITHSUNDEEP
angularjs
sukesh
sukesh

Reputation: 2437

Defining a controller - angularjs

I am doing it this way.

Method 1:

var app = angular.module('MyModule', ['ngDialog']);
app.controller('MyController', function ($scope,ngDialog) {
///
});

but i see a lot like the below kind in articles

Method 2:

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

Please help me understand why is $scope mentioned twice in method 2. Is method 1, a good practice. If not, in what cases will it fail.

Upvotes: 2

Views: 66

Answers (2)

Ved
Ved

Reputation: 12113

The recommended way of declaring Controllers is using the array notation:

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
  ...
  $scope.aMethod = function() {
    ...
  }
  ...
}]);

Dependency Annotation
There are three ways of annotating your code with service name information:

Using the inline array annotation (preferred)
Using the $inject property annotation
Implicitly from the function parameter names (has caveats)

Among These three,Using the inline array annotation is preferred approach.And the last is simplest way to get hold of the dependencies is to assume that the function parameter names are the names of the dependencies.
Advantage of implicitly from the function parameter names approach is that there's no array of names to keep in sync with the function parameters. You can also freely reorder dependencies.And disadvantage is If you plan to minify your code, your service names will get renamed and break your app.

Source: this

Upvotes: 2

Omri Aharon
Omri Aharon

Reputation: 17064

Method 2 is used to prevent minification bugs. In Production when you usually minify your JS/CSS files, the variables' names change to reduce bytes and make the files lighter.

AngularJS relies on DI, which means that it knows which service/provider to inject to your controllers/services according to the name. If it sees $httpProvider, it knows to inject $httpProvider. Once minifaction takes place, the naming will change from:

app.controller('MyController', function (a,b) { //a, b is the change
///
});

Or something of that sort.

Using Method 2, you specify the names as strings, and using those strings AngularJS knows what to inject despite the fact that the minification changed the variables' names.

You can read more about this here.

Upvotes: 2

Related Questions