Dependency injection (DI), is an essential application design pattern. Angular 8 has its own DI framework, which used in the design of Angular application to increase efficiency and portability.

Dependencies are the services that a class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating itself.

In Angular, the DI framework provides dependency to the class when that class is instantiated. We can use it to make our apps flexible, efficient, robust, and testable.

Dependency Injection (DI) is a software design pattern that deals with how component gets its dependencies.

The AngularJS injector subsystem is used to creating components, resolving its dependencies, and providing them to other components as requested.

Why Dependency Injection?

  • Angular dependency injections make an application modularize.
  • Angular DI makes it easier to reuse components an application.
  • It makes it easier to test the components of an application.
  • It makes it easier to configure components of an application.

Components of Dependency Injection in Angular 8

  • Provider
  • Factory
  • Service
  • Constant
  • Value

 1.Value

Value is an object. It can a number, string or javascript object. Value is used to pass the value to controller, services or factories in config or run phase.Value() function is used in module to define values. It consists of two parameters, the first is assigned value.

2.Service

It is like a singleton JavaScript object. It consists of a set of functions to execute any certain tasks. Service() function is used in a module to create services. After the creation, it is used into the controller.

3.Constant

It is used to pass a value at config phase irrespective of the fact that value cannot be moved during its config phase.

4.Provider

In the configuration phase, factory and services are created by using a provider.

5.Factory

A factory is a function that returns the value on demand. It returns value based on the requirement made by service and controller.

It uses a factory function to process the value and return the output.

Angular Dependency Injection Example-

Output:

Enter a Number:20

Result

Result:40

Why we use dependency injection?

Angular 8 Dependency Annotation

Some functions like as controller, service, and factories are implore  through the injector in Angular 8. Therefore, it is required to annotate those functions, so that injector will be well aware of which functions, so that injector will be well aware of which functions is to be injected.

Angular provides three way to annotating code. It is provided with a service name.

1.Inline Array Annotation

Inline array annotation is mostly used to annotate components in angular.

In the example, an array is used. The elements of an array are the dependencies and the string type followed by a function.

2. $inject Property Annotation

It is an array of dependency that is being injected in the function. We can use the $inject property only when it is allowed to rename the function parameter in our code and still to inject the right services.

it is an array of dependency name, therefore, synchronization is necessary between the array and the parameters into the function declaration.

3.Implicit Annotation

It is the easiest way. But if we are minifying code then we cannot use implicit annotation. The parameter passed inside a function are treated as the name of services.

Strict Dependency Injection in Angular 8

We are opt for strict dependency injection in Angular by using the ng-strict-di directive. It will apply on the same elememt as ng-app. When we use strict mode, it will throw an error.

Output

Result of 5+5:10

Pin It on Pinterest

Share This