Dependency injection

Maybe the first framework on the market that included Inversion of Control (IoC) through Dependency Injection (DI) in the JavaScript world was AngularJS. DI provides a number of benefits, such as easier testability, better code organization and modularization, and simplicity. Although the DI in AngularJS does an amazing job, Angular took this even further. Since Angular is on top of the latest web standards, it uses the syntax of ECMAScript 2016 decorators for annotating the code for using DI. Decorators are quite similar to the decorators in Python or annotations in Java. They allow us to decorate the behavior of a given object, or add metadata to it, using reflection. Since decorators are not yet standardized and supported by major browsers, their usage requires an intermediate transpilation step.

The new DI is much more flexible and feature-rich. It also fixes some of the pitfalls of AngularJS, such as the different APIs; in the first version of the framework, some objects are injected by position (such as the scope, element, attributes, and controller in the link function of the directives) and others, by name (using parameters names in controllers, directives, services, and filters).

We will take a further look at the Angular's dependency injection API in Chapter 6, Dependency Injection in Angular.