Why we inject parameter inside array and function

Question

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

app.controller(\'mycontroller\', [\'$scope\',          


        

Answer 1

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) {}])

Answer 2

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.

Answer 3

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.