In this article I will explain AngularJS Dependency
injection with some sample examples; first I will share definition of dependency
injection.
Wiki Definition
In software engineering, dependency injection is a
software design pattern that implements inversion of control for resolving
dependencies. A dependency is an object that can be used (a service). An
injection is the passing of a dependency to a dependent object (a client) that
would use it.
MSDN explanation of Dependency Injection
Dependency Injection (DI) is a design pattern that
demonstrates how to create loosely coupled classes. The term "loosely
coupled" deserves clarification and sometimes the best way to explain
something is by first describing its opposite, which in this case is
"tight coupling."
AngularJS Dependency Injection (DI)
The Angular injector subsystem is in charge of
creating components, resolving their dependencies, and providing them to other
components as requested.
AngualrJS provides following core components which can
be injected into each other as dependencies.
1. Factory methods
Factory methods are functions registered with modules
and used to return some value.
Following code sample explains how to use factory
methods in AngularJS
Example:
var DoctorService = angular.module('DoctorService', [])
DoctorService.factory('DoctorsDataOp', ['$http', function ($http) {
var urlBase = 'http://localhost:54393/Service1.svc';
var DoctorDataOp= {};
DoctorDataOp.getDoctors = function () {
return $http.get(urlBase + '/GetallDoctors');
};
return DoctorDataOp;
}]);In this example we retrieve data using $http.get(),to use the $http service we have to pass this as
dependency to the service factory.
2. Module methods
You can use functions to run at configuration and run
time for a module by calling the config and run methods. These functions are
used same like factory methods with your module, following code sample explains
how to use module methods.
angular.module('myDcotAppModule', [])
.config(['appDepProvider', function (appDepProvider) {
// ...
}])
.run(['doctorService', function (doctorService) {
// ...
}]);3. Value
Here we consider value is simple JavaScript
object used to pass value as parameter.
You can use this to pass controller or inject some
vale to angularJS service.
Example:
var myTestModule =angular.module("myTestModule", []);
myTestModule.value("myValue" , "nk1985");
function MyService(myValue) {
this.doIt = function()
{
//perform some task with myValue
}
}
myModule.service("myService", MyService);4. Service
A service in AngularJS is a singleton JavaScript
object which contains a set of functions, here set of functions contain logic
to complete task you want.
AngularJS services are created using the service()
function on a module.
Example:
var app =
angular.module("EmpApp", []);
app.service("EmployeeService", function ($http) {
// Get Employee data
this.getEmployee = function () {
debugger;
return $http.get("/Home/GetAllEmployees");
};
// Update Employee
this.UpdateEmployee = function (Id, Name,
Email, Address) {
var response =
$http({
method: "post",
url: "Home/Update",
params: {
id: Id, name: JSON.stringify(Name), email: JSON.stringify(Email), address:
JSON.stringify(Address)
}
});
return response;
}
});
5. Provider
Providers are most flexible
in AngularJS you can use providers to create custom services, factory etc,
providers tells angular how to create injectable things we can call these
things services in technical term.
Services are defined by things
called providers, which is what you're creating when you use $provide.
You can use Factory,value,service shortcuts to define
provider , I will explain value in next section with current example I will define
$provide with factory and service.
Example
ProviderTestModule.config(function ($provide) {
$provide.provider('AppConfig',function () {
this.$get = function () {
return function () {
//here some configuration code
};
};
});
});$provide with
factory
ProviderTestModule.config(function ($provide) {
$provide.factory('WebAppConfig', function () {
return function (settingVal1, setttingVal2) {
//here some configuration code
};
});
});$provide with service
ProviderSampleModule.service('WebAppConfig', function () {
return function (configSettingsValues) {
//here some configuration code
};
});$provide with value
ProviderSampleModule.config(function ($provide) {
$provide.value('WebAppConfig', function (settings) {
//here some configuration code
});
});The Injector ($injector)
The injector
is responsible for actually creating instances of our services using the code
we provided via $provide.
You can get an instance of a defined service by
calling get on it with the name of the service.
Sample Code
var myTestInjector =$injector.get('myTestInjector');
myTestInjector('Injected successfully');Using injector you can inject services into any
function you have using the injector's invoke method
Sample Code
var mySampleFunction = function (SomeVal) {
//perform some task with SomeVal
};
$injector.invoke(mySampleFunction);6. Constant
You can create config provider using
AngularJS module.config() function, Unfortunately you cannot inject values into
the module.config() function but you can inject constants here.
Constants in AngularJS are defined using the
module.constants() function.
Example
var appModule = angular.module("EmpApp", []);
appModule.constant("configValue", "some constant config value");
myservices.config(function (mySecondServiceProvider, configValue) {
mySecondServiceProvider.doConfig(configValue);
});7. Controllers
You can inject things (i.e Service, method, value)
into controllers but you can't inject controllers into things, reason controllers
aren't created via the provider.
Example
Angular App
var app= angular.module("EmpApp", []);Angular Service
app.service("EmployeeService", function ($http) {
// Get Employee data
this.getEmployee = function () {
debugger;
return $http.get("/Home/GetAllEmployees");
};
});Angular
Controller injects Service
app.controller("EmpCntrlr", function ($scope, EmployeeService) {
GetAllEmployee();
function GetAllEmployee() {
debugger;
var getAllEmployee =
EmployeeService.getEmployee();
getAllEmployee.then(function
(empls) {
$scope.employees =
empls.data;
}, function
() {
alert('Employee data not found');
});
}
});
References used
1. Dependency injection article shared on website https://github.com
2. Tutorial shared by https://docs.angularjs.org
3. https://en.wikipedia.org/
4. https://msdn.microsoft.com/
धन्यवाद मित्रानो, आपला प्रत्येक दिवस आनंदी आणि सुखी जावो