How does implicit dependency injection work in AngularJS?

Question

I am new to AngularJS and I would like to know more about the dependencies that are introduced by default. When reading the code, I noticed that sometimes dependencies are explicitly declared in advance, and sometimes not. For example:

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

Gets the same results as:

someModule.controller('MyController', function($scope, someService) {
  // ...
});

How it works? Is Angular, assuming the modules introduced are called the same as the variables in the parameters?

In addition, oddly enough, if you specify the dependencies that will be introduced, you must specify all of them and in the correct order , otherwise nothing will work. For example, this does not work code:

someModule.controller('MyController', ['someService', '$scope', function($scope, someService) {
  // Won't give us any errors, but also won't load the dependencies properly
}]);

Can someone clarify how this whole process works? Many thanks!

Answer 1

, Angular , ( Angular - ) .

, , , . , Angular, .. , - , .

app.service('myService', function () {
    // registering a component - in this case a service
    // the name is 'myService' and is used to inject this
    // service into other components
});

() , , :

1.

-, . , , :

app.controller('MyController', function ($http, myService) {
    // ..
});

2. Inline Array Annotation

, - ( ). , . Angular .

app.controller('MyController', ['$http', 'myService', function ($h, m) {
    /* Now here you can use all properties of $http by name of $h & myService by m */
    // Example
    $h.x="Putting some value"; // $h will be $http for angular app
}]);

3. $inject

- $inject -property :

function MyController($http, myService) {
    // ..
}
MyController.$inject = ['$http', 'myService'];
app.controller('MyController', MyController);

, , , , , JavaScript, . Angular , . , .

2 3, 1 /. 3, , , .

, . Angular .