Angular Js- RootScope,Scope,broadcast and Emit
Angular Js Example for - RootScope,Scope,broadcast and Emit concept
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body style="border: 1px solid blue;margin: 5px;padding:5px" ng-app="myApp">
<p>The rootScope:</p>
<h1>{{name}}</h1>
<button ng-click="doBroadCast()"> Root BroadCasting</button>
<div style="border: 1px solid blue;margin: 5px;padding:5px" ng-controller="firstController">
<p>The first Controller</p>
<h1>{{name}}</h1>
<button ng-click="doEmit1()"> First Emit</button>
<button ng-click="doBroadCast1()"> First BroadCast</button>
<div style="border: 1px solid blue;margin: 5px;padding:5px" ng-controller="firstNestedController">
<p>The firstNestedController Controller</p>
<h1>{{name}}</h1>
<button ng-click="doEmit11()"> First Nested Emit</button>
</div>
</div>
<div style="border: 1px solid blue;margin: 5px;padding:5px" ng-controller="secondController">
<p>The secondController Controller</p>
<h1>{{name}}</h1>
</div>
<p>The rootScope:</p>
<h1>{{name}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
// $rootScope.name = 'Pavan';
$rootScope.$on("FirstControllerEvent",function(e,data){
alert("FirstController - Alert -Root");
});
$rootScope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-Root");
});
$rootScope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-Root");
});
$rootScope.doBroadCast=function(){
$rootScope.$broadcast("RootBroadCastEvent");
}
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-Root");
});
});
app.controller('secondController', function($scope,$rootScope) {
$scope.name = "Second Pankaj";
$rootScope.name = 'Second Pallavi';
$rootScope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-Root-SecondController");
});
$scope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-secondcontroller");
});
$rootScope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-Root-secondcontroller");
});
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-SecondController-root");
});
$scope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-secondController");
});
});
app.controller('firstController', function($scope,$rootScope) {
$scope.name = "First Pankaj";
$rootScope.name = 'First Pallavi';
$scope.doEmit1=function(){
$scope.$emit("FirstControllerEvent");
}
$scope.doBroadCast1=function(){
$scope.$broadcast("FirstController_BroadCast_Event");
}
$scope.$on("FirstControllerEvent",function(e,data){
alert("FirstController - Alert-firstController");
});
$scope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-firstController");
});
$scope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-firstController");
});
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstController-root");
});
$scope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstController");
});
});
app.controller('firstNestedController', function($scope,$rootScope) {
$scope.name = " First Nested Pankaj";
$scope.$on("FirstControllerEvent",function(e,data){
alert("FirstController - Alert-firstNestedController");
});
$scope.doEmit11=function(){
$scope.$emit("FirstNestedControllerEvent");
}
$scope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-firstNestedController");
});
$scope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-firstNestedController");
});
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstNestedController-root");
});
$scope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstNestedController");
});
});
</script>
</body>
</html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body style="border: 1px solid blue;margin: 5px;padding:5px" ng-app="myApp">
<p>The rootScope:</p>
<h1>{{name}}</h1>
<button ng-click="doBroadCast()"> Root BroadCasting</button>
<div style="border: 1px solid blue;margin: 5px;padding:5px" ng-controller="firstController">
<p>The first Controller</p>
<h1>{{name}}</h1>
<button ng-click="doEmit1()"> First Emit</button>
<button ng-click="doBroadCast1()"> First BroadCast</button>
<div style="border: 1px solid blue;margin: 5px;padding:5px" ng-controller="firstNestedController">
<p>The firstNestedController Controller</p>
<h1>{{name}}</h1>
<button ng-click="doEmit11()"> First Nested Emit</button>
</div>
</div>
<div style="border: 1px solid blue;margin: 5px;padding:5px" ng-controller="secondController">
<p>The secondController Controller</p>
<h1>{{name}}</h1>
</div>
<p>The rootScope:</p>
<h1>{{name}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
// $rootScope.name = 'Pavan';
$rootScope.$on("FirstControllerEvent",function(e,data){
alert("FirstController - Alert -Root");
});
$rootScope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-Root");
});
$rootScope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-Root");
});
$rootScope.doBroadCast=function(){
$rootScope.$broadcast("RootBroadCastEvent");
}
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-Root");
});
});
app.controller('secondController', function($scope,$rootScope) {
$scope.name = "Second Pankaj";
$rootScope.name = 'Second Pallavi';
$rootScope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-Root-SecondController");
});
$scope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-secondcontroller");
});
$rootScope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-Root-secondcontroller");
});
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-SecondController-root");
});
$scope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-secondController");
});
});
app.controller('firstController', function($scope,$rootScope) {
$scope.name = "First Pankaj";
$rootScope.name = 'First Pallavi';
$scope.doEmit1=function(){
$scope.$emit("FirstControllerEvent");
}
$scope.doBroadCast1=function(){
$scope.$broadcast("FirstController_BroadCast_Event");
}
$scope.$on("FirstControllerEvent",function(e,data){
alert("FirstController - Alert-firstController");
});
$scope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-firstController");
});
$scope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-firstController");
});
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstController-root");
});
$scope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstController");
});
});
app.controller('firstNestedController', function($scope,$rootScope) {
$scope.name = " First Nested Pankaj";
$scope.$on("FirstControllerEvent",function(e,data){
alert("FirstController - Alert-firstNestedController");
});
$scope.doEmit11=function(){
$scope.$emit("FirstNestedControllerEvent");
}
$scope.$on("FirstNestedControllerEvent",function(e,data){
alert("FirstNestedController - Alert-firstNestedController");
});
$scope.$on("FirstController_BroadCast_Event",function(e,data){
alert("FirstController_BroadCast_Event - Alert-firstNestedController");
});
$rootScope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstNestedController-root");
});
$scope.$on("RootBroadCastEvent",function(e,data){
alert("RootBroadCastEvent - Alert-firstNestedController");
});
});
</script>
</body>
</html>
Comments