Dependency Injection allows the removal of hard-coded dependencies and makes it possible to change them. It helps in making components testable,reusable and maintainable.
We are provided with in built dependency injection mechanism by AngularJs. We can easily divide our application into multiple types of components and then use AngularJs to inject them into one another.
Some well known services that can be injected in a controller are:-
1.$http
2.$resource
3.$document
4.$window
5.$timeout
6.$scope
7.$filter
AngularJS injects all parameters whenever a controller is instantiated. Simple way to inject is -
mainApp.controller( exampleController", function( $scope, $http, $timeout, $state, $rootScope ) {
})
There are some components provided by AngularJs. These are :-
1.Value
2.Provider
3.Factory
4.Constant
5.Service
Value- It stores a single value and is the simplest Angularjs service to create and use. For example-
var myapp = angular.module(myApp, []);
myApp.value("Value", 9); // add value to angularjs module
//Injecting this value
myApp.controller(EgCtrl, function($scope, Value) {
console.log(Value);
});
Provider -Provider is a special factory method with a method get() which is used to return the value/service/factory.Providers can be configured during the module configuration phase. The constructor function is instantiated before the $get method is called. For example:-
myapp.provider('Circle', function () { // Create a service that calculates area of a circle
return {
$get: function (pi) {
return {
area: function(r){
return pi * r * r;
}
}
}
}
});
myapp.controller("mycontroller", function ($scope, Circle) { // Injecting into the controller
})
Factory -In a Factory you create an object, add properties and methods to it, then return that same object. When you pass this service into your controller, those properties on the object will now be available in that controller through your factory.
myapp.factory('Circle', function(pi) { // Creates a factory called circle that calculates area of a circle
var myfactory = {};
myfactory.Area = function (r) {
return pi * r * r;
}
return myfactory;
});
myapp.controller("mycontroller", function ($scope, Circle) { //Injecting this factory into the controller
})
Constant - Value of a constant is never changed(it remains constant). It can be injected everywhere. For example:
myapp.constant("pi", 3.14); // declaring a constant pi with its value 3.14
Now anywhere pi is used, its value will be taken as 3.14.
Service - service receives a javascript constructor function as argument. It creates a service by invoking a constructor with the new operator. We can inject other services also in it. -
myapp.service('Circle', function(pi) {// creating a service called Circle
this.Area = function (r) {
return pi * r * r;
}
});
myapp.controller("mycontroller", function ($scope, Circle) { // Injecting the service in the controller
})
Note:-This is not the complete code as per logic. This is only to provide a basic example of its usage.
0 Comment(s)