Mittwoch, 18. Mai, 2016

Finishing Angular TODO application and deploying to production 105
is due to the fact that once you use any obfuscation¹⁸¹ tools (even simple minimization with variable
replacement option) your code will stop working in the second example because dependencies will
get mixed up, and the code in the first example solves this. You will learn more about scope and
controllers as we go on, but if you’re interested feel free to take a detour now and learn more about
scope¹⁸² and controllers¹⁸³ from the official docs (both quite extensive and good).
Dependency injection
Now, this fancy term can be nicely explained with a simple example; say you have a simple Howdy
class which creates an instance of SomeService, and when the greet function is called it checks for
it’s value and if it’s equal to ‘iLoveToReturnUsefulData’ you can do something great further within
your app logic:
1 var Howdy = function() {
2 this.someService = new SomeService();
3 };
4
5 Hello.prototype.greet = function() {
6 var data = this.someService.getData();
7 if (data.value === 'iLoveToReturnUsefulData')
8 //do something great
9 };
And sure, this works well until you want to test this class. You’ll create an instance of the Howdy
class in your test function, but you won’t be able to pass someService object to it. Dependency
injection solves this by moving the responsibility of creating the someService object to the creator
of the Howdy instance, whether it is another object or a test mock object¹⁸⁴:
1 var Howdy = function(someService) {
2 this.someService = someService;
3 };
With this rather small change you’re able to control the behavior of the Howdy class instance outside
of it’s constructor, which is often referred to as inversion of control¹⁸⁵. You can learn more about
DI in the official docs¹⁸⁶. One of the good explanations about how dependency injection works in
AngularJS I found was:
¹⁸¹https://en.wikipedia.org/wiki/Obfuscation_
¹⁸²https://docs.angularjs.org/guide/scope
¹⁸³https://docs.angularjs.org/guide/controller
¹⁸⁴http://en.wikipedia.org/wiki/Mock_object
¹⁸⁵http://en.wikipedia.org/wiki/Inversion_of_control
¹⁸⁶https://docs.angularjs.org/guide/di