What Is Dependency Injection in AngularJS
AngularJS is an open source JavaScript MVW (Model View Whatever) framework backed by Google and is widely popular for creating dynamic apps. It offers a suite of tools that can be used for building the framework most suited to your single page application development. However, it can also be fully utilized to work for other categories of web pages. It works well with other web-based libraries and is fully extensible. All its features can be modified and even can be replaced to suit your unique development workflow and web feature needs.
As AngularJS is a pure JavaScript framework, it can be added to an HTML page with a normal <script> tag with src attribute pointing to the source framework library, just like other JavaScript libraries.
AngularJS extends HTML attributes using Directives. It binds data to HTML using Expressions.
AngularJS can be downloaded from https://angularjs.org/.
If you’re new to AngularJS, it is better to get introductory information from http://angularjs.org. This site provides the basic information required to start working with AngularJS.
It has various features including MVC Architecture, Directives, Expressions, Controllers, Filters, HTML DOM, Modules, Views, AJAX, Scopes, Services, Dependency Injection, and Internationalization. We will deal with Dependency Injection in the following section.
Dependency Injection − AngularJS has a built-in dependency injection (DI) subsystem library whose work is to help the development team by making the application easier to develop, test, and understand. We will learn about each part of DI in detail.
The topics we will go through in this article are:
Dependency injection in AngularJS
Today’s software is totally designed in accordance with various design patterns. One such pattern is Dependency Injection. The DI design pattern specifies the pattern in which components are provided with their dependencies, instead of hard coding them within the component.
AngularJS comes with a built-in dependency injection mechanism that enables you to divide your application into various types of components which can be injected into each other as their respective dependencies.
Modularization of your application makes it easier to use, reuse, configure and even test the different components in your application. According to DI the core types of objects and components include the following:
These are the objects and components which can be injected into each other using AngularJS Dependency Injection.
For AngularJS, the “Value” is a simple object. It can be a number, a string or a POJO (Plain old JavaScript object). This object is used to pass values in AngularJS factories, AngularJS services or AngularJS controllers during the run and config phase. The following example shows the steps involved in using a value.
Step 1: Define a module
Here, myModule is created using the AngularJS function angular.module(). You can add value, controllers, directives, filters, and more, to your AngularJS application using a module.
Step 2: Create a value object and pass data to it.
Here, values are defined using the value () function on the module as created in step 1. The first parameter specifies the name of the value, and the second parameter is the value itself passed to other parts of the application. Factories, services and controllers can now reference these values by their value name.
Step 3: Injecting a value in Controller function
To inject a value into AngularJS controller function, we need to add a parameter with the same value name as that with which the value was defined. Note that the controller function is registered in angular via the angular.module(…).controller(…) function call. The $scope parameter passed to the controller function is the model for the controller. Thus, here myMod is the module registering the controller as myController, and $scope is the model for myController.
Example: Using Value in AngularJS:
Consider that you have already downloaded the latest AngularJS file from https://angularjs.org/ (here we are using the minified version of AngularJS as angular.min.js). We can even use the AngularJs CDN for the same provided by Google.
Output: 
In AngularJS, a factory is a function that is used to return a value. This function creates the value on demand whenever a service or controller needs any value injected from the factory. AngularJS applications normally use a factory function to calculate and return a value. The following example shows the steps involved in using a Factory.
Step 1: Define a module
Here, myModule is created using the AngularJS function angular.module(). You can add factory, value, controllers, directives, filters, and more, to your AngularJS application using a module.
Step 2: Create a factory object and return data from it.
Here, we have used the factory function to create a Factory named myFactory. This Factory is returning “a value” from it.
Step 3: Injecting values into factory
Create a controller which gets the factory created value injected (for explanation of Controller, go to the Value part of the article and navigate to its Step 3). To inject a factory value into AngularJS controller function, we need to add a parameter with the same value name as that with which the factory was defined.
Note: It is not the factory function that is injected, but the value produced by the factory function that gets injected.
Example: Using Factory in AngularJS:
Output: 
Web Services are helpful functions that perform a task. Similarly, in AngularJS, Service is a JavaScript object which contains a set of functions to perform certain tasks. Services are created by using service() function on a module and then injecting it into controllers. The following example shows the steps involved in using a Service.
Step 1: Define a module
Here, myModule is created using the AngularJS function angular.module(). You can add Services, factory, value, controllers, directives, filters, and more, to your AngularJS application using a module.
Step 2: Create a service for defining the MathService for calculating basic math functions like add, subtract, multiply and divide. And then create another service, myService for defining a cube method to return the cube of a given number:
The above code snippet uses MathService to call multiply function that takes two parameters and calculates the product.
Step 3: Inject the service “myService” into the controller
Create a controller which gets the Service injected (for explanation of Controller, go to the Value part of the article and navigate to its Step 3). To inject a Service function into AngularJS controller function, we need to add a parameter with the same value name as that with which the Service was defined.
Here we can even make it event based by adding an event in the main HTML content as:
Example: Using Service in AngularJS:
Output: 
In AngularJS, a provider is used to internally create other values or services or factory during config phase (the phase during which AngularJS bootstraps itself). Provider can be considered to be the most flexible form of factory you can create. Provider is a special factory method with a get() function which is used to return the value or service or factory. The following example shows the steps involved in using a Provider.
Step 1: Define a module
Here, myModule is created using the AngularJS function angular.module(). You can add Services, factory, value, controllers, directives, filters, and more, to your AngularJS application using a module.
Step 2: Create a service using provider which defines a method square to return the square of a number. We use provider method to create a Provider.
Step 3: Inject the Provider “myServiceProvider” into the controller
Create a controller which gets the Provider injected (To understand how to create a Controller, go to the Value part of the article and navigate to its Step 3). To inject a Provider function into AngularJS controller function, we need to add a parameter with the same value name as that with which the provider was defined.
Example: Using Provider in AngularJS:
Output: 
Config Phase of AngularJS has some restrictions for injected values, as you cannot inject values into the module.config() function. Instead constants are used to pass values at config phase. To define a constant value we use the constant() function of the defined module. Then for the constant parameter we provide a constant value. The following example shows the steps involved in using a Constant in AngularJS.
Step 1: Define a module
Here, myModule is created using the AngularJS function angular.module(). You can add Services, factory, value, controllers, directives, filters, and more, to your AngularJS application using a module.
Step 2: Create a constant using the constant function and pass constant data to it.
Example: Using Constant in AngularJS:
Output: 
Values and Constants seem to be applied in the same way; however, Value differs from Constant in that value cannot be injected into configurations, but it can be intercepted by decorators. Also, a Constant can be used during the apps config phase, whereas a Value is only available during the run phase. The main difference between value and constant is that a value specified using Constant is available during the configuration phase while value specified using Value is available during the run phase.
Example showing the difference between a Constant and a Value:
Output:
Constant Example
myValue: Second Assignment myConstant: First Assignment
Let’s take an example to deploy all the above mentioned directives.
Output: 
In the above article we learned about the Dependency Injection in AngularJS. Dependency Injection is a software design pattern that specifies how components get hold of their dependencies. In this pattern, components are given their dependencies instead of coding them directly within the component.
We learned about core types of objects and components like Value, Factory, Service, Provider, and Constant. We learned how to create and register an injectable service and configure an injector with a service provider. We learned how to work with Injecting services to a controller.
In the end we summarized with a complete example how Providers, Services, Factory and Value can be used.
Note: Angular is a version upgrade to AngularJS. Therefore, Angular refers to AngularJS in this article.
- Injecting a Value
- Injecting Values into a Factory
- Injecting Values into a Service
- Configuring a Provider
- Dependencies Between Modules
Research & References of What Is Dependency Injection in AngularJS|A&C Accounting And Tax Services
Source