CODEWITHSUNDEEP
javascriptangularjsdependency-injection
skvj
skvj

Reputation: 103

Why we inject parameter inside array and function

I'm a beginner in Angular development. I don't know why we inject twice argument inside for controller like:

app.controller('mycontroller', ['$scope', 'myFactory', 'Myothers', function ($scope, myFactory, Myothers) {}])

and see

app.controller('mycontroller', function ($scope, myFactory, Myothers) {})

Could you explain why we do this?

Upvotes: 3

Views: 584

Answers (3)

omer cohen
omer cohen

Reputation: 282

first you can do without array like:

app.controller("myController",function($scope,myFactory,MyOrders){});

in array you are declares variables , you can do like something that:

app.controller('mycontroller',['$scope', 'myFactory', 'Myothers', function (s, f, o) {}])

the s as scope , the f as myfactory , the o as order;

it is your's choice how to use , but in angular tutorials they say the right way is : 

app.controller('mycontroller',['$scope', 'myFactory', 'Myothers', function (s, f, o) {}])

Upvotes: 3

Rohìt Jíndal
Rohìt Jíndal

Reputation: 27222

When we pass a dependency as an Array Argument, the application does not break in production when we minify the application.

Ways to do this :

  • Using the Named function
  • Using the Inline Anonymous function

Using the Named function :

We can pass dependencies as Array Arguments with the named function.

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

function MyCtrl($scope) {

    $scope.name = "Rohit";

};

app.controller('MyCtrl', ['$scope', MyCtrl]);

Using the Inline Anonymous function :

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

app.controller('MyCtrl', ['$scope', function ($scope) {

    $scope.name = "Rohit";

}]);

Differences :

The difference is that when the app.controller('mycontroller', function ($scope, myFactory, Myothers) {}) is minified, the parameter name will be minified and angular will no longer be able to figure out which dependencies to inject. The array syntax with the dependency in a string means that it is minification safe.

alternate solution :

we can use ng-annotate library which will change the app.controller('mycontroller', function ($scope, myFactory, Myothers) {}) into the app.controller('mycontroller', ['$scope', 'myFactory', 'Myothers', function ($scope, myFactory, Myothers) {}]) so that the code is again minification safe.

Upvotes: 2

Pritam Banerjee
Pritam Banerjee

Reputation: 18933

The reason is to protect the code from javascript minification.

The $inject makes sure that the variable names are preserved in the form of strings.

So ideally your app code should look something like this:

 var app = angular.module('YourApp', []);
 var appCtrl = app.controller('AppCtrl', AppCtrl);

 appCtrl.$inject = ['dep1', 'dep2']; //add all the dependencies

 function AppCtrl (dep1,dep2){  //add the name of the dependencies here too
    //your controller logic
 }

During minification javascript replaces variable name with custom names, so dep1 might be replaced by d and hence will cause error.

But $inject will let angular know that the actual name of the dependency is dep1 as it is stored in the form of string value which is protected from minification.

Hence we use $inject.

Upvotes: 6

Related Questions