Why does "w500" require a "$ scope" controller?

Question

I usually found out that the implementation of the function can have any name for the arguments of the function if it comes in the correct order. This makes the function abstracted from the outside world, and local names do not affect the result. The contractor has all rights to local variables. However, in Angular JS, it seems to confront intuitively to have something like:

function Controller($scope) { $scope.name = "Something"; } 

If I put a "bar" instead of "$ scope", I get an error message. This is not an ordinary function that we are used to. I believe this is related to DI, but can anyone explain this concept? It’s hard for me to call this “function” because it depends on the outside world — especially on the name of the argument.

If DI is the real reason, can someone let me know how it is called? Usually I can think of DI doing good when I want to mock an object for a test case. In this case, what role does DI play?

In normal DI scripts that I came across, the argument that is passed executes the function for the function, for example say foo displayTime (clock) {clock.something}. Time is just a service for this feature. However, here I find that $ scope and framework seem to do the magic, as a function is just a declarative way of expressing logic.

Edit: Obviously, JS minify violates this functionality, and we need to do something like How do function argument names in Angular.js objects connect to other objects?

Answer 1

One way to define a controller:

 myApp.controller("TestController", ['$scope', function(bar) { // now "bar" is actually the scope variable }]); 

The whole reason angular works is related to how it injects dependencies. It basically searches for dependencies (e.g. $scope ) and tries to insert them based on the variable name. This means that if you call $scope something else, it will try to introduce another element instead. bar is not something that angular knows how to type so that you get the value undefined instead of the $scope you expected.

My example above works because I used an array to extract the variable names that will be inserted from the variables themselves. Now you do not need to use the word $scope , but you must keep the variables in the same order. The whole DI concept is too complicated to explain in a short article, so I recommend reading more about it on the angular website here: https://docs.angularjs.org/tutorial/step_05

DI point (in angular)

In case you are interested - why go to all these troubles? Why not just insert $scope into the first variable in the list? The answer is flexibility and customization. With angular, you can define your services and factories and then inject them into your controllers. This gives you the ability to define common procedures, objects, or even custom controls, and then use as many controllers as possible. Without DI, none of this would have been possible. Again, these are fairly complex concepts, so I recommend starting with the leap of faith that “it works” by learning about the services, and then you can come back and learn more about it. At this point, I think DI should make a lot more sense!

Good luck