$scope in angular JS is an object.
$scope acts like a glue between the controllers
and the views.
In technical terms we can define $scope members
as local members, which are related to its concern controller.
The access levels of $scope is permitted to the
controller level and can also be in service.
Sample Look :
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('ctrol1',
['$scope', function ($scope) {
$scope.var1 = "First Contoller
variable";
}]);
myApp.controller('ctrol2',
['$scope', function ($scope) {
$scope.var2= "Second Contoller
variable";
}]);
</script>
In the above script, we can find one
appplication or module named “myApp” and two controllers named “ctrol1” and “ctrol2”.
“ctrol1” contains one property named “var1”.
“ctrol2” contains one property named “var2”.
HTML or View Code :
<body
ng-app="myApp">
<div ng-controller="ctrol1">
{{var1}}
</div>
<hr />
<div ng-controller="ctrol2">
{{var2}}
</div>
</body>
Result of the above code :
The above code works perfectly without any
problem. Now, let me try to access the “var1” which belongs to the “ctrol1” in
the “ctrol2”.
Modified View code :
<body
ng-app="myApp">
<div ng-controller="ctrol1">
{{var1}}
</div>
<hr />
<div ng-controller="ctrol2">
{{var1}}
</div>
</body>
Code, In the above code I tried to access the
value of “ctrol1”’s variable inside “ctrol2”’s controller.
The result provides us with no content as “var1”
scope variable was not there inside controller “ctrol2”.
$rootscope in angular JS acts like a parent to
all $scope objects
In technical terms we can define $rootscope
members as global members, which are related to its application or module level.
Every appplication in angular JS will be
containing the parent scope which is nothing but the $rootscope.
The access levels of the $rootscope is tends to
the application level or module level.
Sample Look :
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('ctrol1',
['$scope', '$rootScope', function ($scope, $rootScope) {
$scope.var1 = "First Contoller
variable";
$rootScope.globalvar = "It's global from root
scope";
}]);
myApp.controller('ctrol2',
['$scope', function ($scope) {
$scope.var2 = "Second Contoller
variable";
}]);
</script>
In the above script I had included the $rootScope
as second parameter to the controllers anonymous function. Within that
controller I also declared a variable named “$rootScope.globalvar” with some value. Now, as this variable was embedded with $rootScope this
variable I can use in view of second controller too as like follow :
<body
ng-app="myApp">
<div ng-controller="ctrol1">
{{var1}} <br />
{{globalvar}}
</div>
<hr />
<div ng-controller="ctrol2">
{{var2}}<br />
{{globalvar}}
</div>
</body>
In the above code, we used the “globalvar” in
both controllers even though it was assigned in “ctrol1” only. As it is embedded
to the $rootscope we can access in both controllers.
Result of above code :
Every angular JS application will contain only
one $rootscope and any number of the $scope.
Hello Reddy, good article. Can u please post a articles all Angular @2.
ReplyDelete