AngularJs comes with built-in dependecy-injection mechanism. You can divide your application into multiple different types of components which AngularJS can inject into each other.

Injecting a value :

Injecting a value into an AngularJS controller function is done simply by adding a parameter with the same name as the value (the first parameter passed to the value() function when the value is defined). Here is an example:

var myModule = angular.module(“myModule”, []);

myModule.value(“numberValue”, 999);

myModule.controller(“MyController”, function($scope, numberValue) {

console.log(numberValue);

});

Injecting value into a Factory:

Factory is a function that creates values. Once created, the value is reused for all services, controllers etc. which need it injected.

You can inject a value into a factory. It works just like when a value is injected into a controller. Here is an example:

var myModule = angular.module(“myModule”, []);

myModule.value(“numberValue”, 999);

myModule.factory(“myFactory”, function(numberValue) {
return “a value: ” + numberValue;
});

Injecting values in a Service:

A service in AngularJS is a singleton JavaScript object which contains a set of functions. The functions contain whatever logic is necessary for the service to carry out its work.

You can inject values into a service, just like you can inject values into controllers, or services into controllers etc. Here is an example:

var myModule = angular.module(“myModule”, []);

myModule.value (“myValue” , “12345”);

function MyService(myValue) {
this.doIt = function() {
console.log(“done: ” + myValue;
}
}

myModule.service(“myService”, MyService);

Provider:

Providers in AngularJS is the most flexible form of factory you can create. You register a provider with a module just like you do with a service or factory, except you use the provider() function instead. Here is an AngularJS provider example:

var myModule = angular.module(“myModule”, []);

myModule.provider(“mySecondService”, function() {
var provider = {};

provider.$get = function() {
var service = {};

service.doService = function() {
console.log(“mySecondService: Service Done!”);
}

return service;
}

return provider;
});

Injecting provider into controller:

myModule.controller(“MyController”, function($scope, mySecondService) {

$scope.whenButtonClicked = function() {
mySecondService.doIt();
}

});

Injecting Constants:

Constants in AngularJS are defined using the module.constants() function.As shown below:

myModule.constant(“configValue”, “constant config value”);

Example as shown below:

   myservices.config( function( mySecondServiceProvider, configValue ) {
mySecondServiceProvider.doConfig(configValue);
});

Dependencies Between Modules:

It is possible for one module to use the values, factories and services of another module. In order to do so, a module needs to declare a dependency on the module which contains the values, factories and services it wants to use. Example as shown below:

var utilModule1 = angular.module(“utilModule1 “, []);
utilModule1 .value (“myValue” , “12345”);
var utilModule2= angular.module(“utilModule2″, ['utilModule1']);
utilModule2.controller(“MyController”, function($scope, myValue) {
}

Here, second module utilModule2 want to use values, factories and services of first module utilModule1. So, it will have to show dependency on utilModule1.

 

---

ProsperaSoft offers AngularJs development solutions. You can email at info@prosperasoft.com to get in touch with ProsperaSoft AngularJs experts and consultants.