AngularJS Essentials

Dependency Injection and Services
Dependency injection
In order to create testable and well-designed applications, we need to take care about
the way their components are related to each other. This relationship, which is very
famous in the object-oriented world, is known as coupling, and indicates the level of
dependency between the components.
We need to be careful about using the operator new inside a component. It reduces
the chances of replacing the dependency, making it difficult for us to test it.
Fortunately, AngularJS is powered by a dependency injection mechanism that
manages the life cycle of each component. This mechanism is responsible for creating
and distributing the components within the application.
The easiest way to obtain a dependency inside a component is by just declaring it as
a parameter. The framework's dependency injection mechanism ensures that it will
be injected properly. In the following code, there is a controller with two injected
parameters, $scope and $filter:
controllers.js
parking.controller("parkingCtrl", function ($scope, $filter) {
$scope.appTitle = $filter("uppercase")("[Packt] Parking");
});
Unfortunately, this approach will not work properly after the code is minified and
obfuscated, which is very common these days. The main purpose of this kind of
algorithm is to reduce the amount of code by removing whitespaces, comments, and
newline characters, and also renaming local variables.
The following code is an example of our previous code after it is minified
and obfuscated:
controllers.min.js
x.controller("parkingCtrl",function(a,b){a.appTitle=b("uppercase")
("[Packt] Parking");});
The $scope and $filter parameters were renamed arbitrarily. In this case, the
framework will throw the following error, indicating that the required service
provider could not be found:
Error: [$injector:unpr] Unknown provider: aProvider