Example of module dependencies
In this blog we'll describe how to use multiple module in single controller and how to use provider in Angularjs .for more understanding see given image below.
Step 1:-Create HTML page using angularjs.js library or CDN:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="mainModule">
<div ng-controller="mainController">
<strong>provider1 ID:</strong> <br/>
<strong>provider2 ID:</strong> <br/>
<strong>provider3 ID:</strong> <br/>
<strong>provider4 ID:</strong>
</div>
</body>
</html>
Step 2:-Create script.js file
//Definition of a BaseProvider item to utilize
//in various occasions crosswise over various modules.
var BaseProvider = capacity ()
{
var providerID;
return {
setID: capacity (id)
{
providerID = id;
},
$get: capacity ()
{
return {
getProviderID: capacity ()
{
return providerID;
}};
}};
};
angular.module("childModule1", [ ]).provider("provider1", BaseProvider)
.config(function (provider1Provider)
{
provider1Provider.setID("provider1-childModule1");
}).provider("provider2", BaseProvider).config(function (provider2Provider)
{
provider2Provider.setID("provider2-childModule1");
});
angular.module("childModule2", ["childModule3"])
.provider("provider1", BaseProvider).config(function (provider1Provider)
{
provider1Provider.setID("provider1-childModule2");
}).provider("provider3", BaseProvider).config(function (provider3Provider)
{
provider3Provider.setID("provider3-childModule2");
});
angular.module("childModule3", [ ]).provider("provider1", BaseProvider)
.config(function (provider1Provider)
{
provider1Provider.setID("provider1-childModule3");
}).provider("provider4", BaseProvider).config(function (provider4Provider)
{
provider4Provider.setID("provider4-childModule3");
});
//"mainModule" relies on upon "childModule1" and "childModule2". The "provider1" //example
//in "childModule2" overrides the "provider1" example characterized in //"childModule1"
//in light of the fact that both the modules are conditions of "mainModule" and in the //conditions
//exhibit "childModule2" comes after "childModule1". In the event that the conditions cluster was
//["childModule2", "childModule1"] then "provider1" in "childModule1" would //override
//"provider1" in "childModule2". "provider1" in "childModule3" is overridden by the
//same definition in alternate modules on the grounds that alternate modules are //closer to
//the foundation of the pecking order (they are offspring of "mainModule", while //"childModule3"
//is an offspring of "childModule2").
//I can get every one of the suppliers in alternate modules through Dependency //Injection
//on the grounds that there's just a level (with no order) gathering of supplier names
//in the entire AngularJS application and it doesn't rely on upon the modules chain of //importance.
.controller("mainController", capacity ($scope, provider1, provider2, provider3, provider4)
{
//Set variables on the degree to reference the diverse suppliers from the HTML layout
$scope.provider1 = provider1;
$scope.provider2 = provider2;
$scope.provider3 = provider3;
$scope.provider4 = provider4;
});
angular.module("mainModule", ["childModule1", "childModule2"])
Brief Description:-
In AngularJS, we call benefit any item enrolled in a module through the accompanying capacities: esteem, administration, production line, supplier.
A module can rely on upon different modules in this way framing a chain of importance, however benefits characterized into modules don't shape a progressive system and when the application is stacked they all go into a one of a kind namespace. An administration is obvious (and accessible for Dependency Injection) to every one of the modules stacked in the same application freely of the modules progressive system.
An administration name can be utilized to enlist just a solitary administration in the entire application.
mainModule relies on upon childModule1 and childModule2 while childModule2 depends just on childModule3.
For every module we can see the names of the enrolled administrations and the same name provider1 is utilized by all the tyke modules to enlist diverse administrations.
The provider1 occasion in childModule2 overrides the provider1 occurrence characterized in childModule1 in light of the fact that both the modules are conditions of mainModule and in the conditions exhibit childModule2 comes after childModule1. In the event that the conditions cluster was [childModule2, childModule1] then provider1 in childModule1 would override provider1 in childModule2. provider1 in childModule3 is overridden by the same definition in alternate modules on the grounds that alternate modules are closer to the foundation of the order (they are offspring of mainModule, while childModule3 is an offspring of childModule2).
You have just read an article that categorized by title AngularJs
by title How to use multiple Module in single View/HTML page in angularjs?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/01/part-10how-to-use-multiple-module-in.html. Thank You!
Author:
Bikesh Srivastava - Sunday, January 31, 2016
Nice post....Useful...
ReplyDeleteThank you for sharing valuable information.
ReplyDeleteAngular online training
Thank you for sharing valuable information.
ReplyDeleteAngular online training