Scope in angular JS is an object. Scope is used to set as a mediator between the controller and view. The process of the scope will be as like below pattern :
1) Creation of scope.
2) Creation of controller instance.
3) Execution of the controller function.
4) View setting up with model values.
5) Destroy the $scope
2) Creation of controller instance.
3) Execution of the controller function.
4) View setting up with model values.
5) Destroy the $scope
1)Creation of scope :
Whenever the angular parser reads the ng-controller directive in the view, at that moment initially it
confirms weather the controller definition exists or not, if exists then the compiler will create the scope object. Have to note that the created scope object will tends to only that controller block itself.
Whenever the angular parser reads the ng-controller directive in the view, at that moment initially it
confirms weather the controller definition exists or not, if exists then the compiler will create the scope object. Have to note that the created scope object will tends to only that controller block itself.
2)Creation of controller instance :
After creation of scope object, to the next process it creates the instance of the controller.Have to remember that until the creation of the instance there will be only definition of the controller being like a skeleton. At this position the controller can be able to interact with the scope object.
After creation of scope object, to the next process it creates the instance of the controller.Have to remember that until the creation of the instance there will be only definition of the controller being like a skeleton. At this position the controller can be able to interact with the scope object.
3)Execution of the controller function:
As soon as the instance created for the controller, the angular parser moves over to the controller function and reads over all the model variables that were defined in the controller. Here model variables means nothing but the properties of the $scope created within the concern controller. Hence we can say that scope object will be having all our defined model variables/properties. Here comes the picture of watchers just to have an eye on $scope variables for more on watchers please follow the link : Watchers in angular JS
As soon as the instance created for the controller, the angular parser moves over to the controller function and reads over all the model variables that were defined in the controller. Here model variables means nothing but the properties of the $scope created within the concern controller. Hence we can say that scope object will be having all our defined model variables/properties. Here comes the picture of watchers just to have an eye on $scope variables for more on watchers please follow the link : Watchers in angular JS
4)View setting up with models values :
Once the scope object is set up with all its properties that were read from the controller, the scope object will tries to find out those model variables in the view/mark up code and assigns the stored values which means like manipulation of DOM with their related defined values.
Once the scope object is set up with all its properties that were read from the controller, the scope object will tries to find out those model variables in the view/mark up code and assigns the stored values which means like manipulation of DOM with their related defined values.
5)Destroy the $scope :
It’s not mandatory but in some cases for releasing out the memory, if we feel that particular scope is no more required(Ex: within a function) we can destroy it by using the sccope.$destroy(); or as an event we can follow $scope.$on("$destroy",function(){}) to destroy.
It’s not mandatory but in some cases for releasing out the memory, if we feel that particular scope is no more required(Ex: within a function) we can destroy it by using the sccope.$destroy(); or as an event we can follow $scope.$on("$destroy",function(){}) to destroy.
Inheriting Scope :
In general the term inherit means receive or taking from the parent or previous ones. Coming to the part of programming if you are familiar with object oriented programming hope you might be know this as like accessing the members of parent class in child class. The same functionality can be take over here between the controllers among the $scope members.
In general the term inherit means receive or taking from the parent or previous ones. Coming to the part of programming if you are familiar with object oriented programming hope you might be know this as like accessing the members of parent class in child class. The same functionality can be take over here between the controllers among the $scope members.
In the above image,
we are having parent and child controllers as named “ParentController” and “ChildController”
where the parent controller is having the model named “$scope.firstname” and
the child controller having the model named “$scope.lastName”. As per the
inheritance flow, the child controller can access the $scope.firstName from the
parent controller whereas the parent controller cannot access the
$scope.lastName from the child controller. Let’s have a look over the concept
by program.
JS Code :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller("ParentController", ['$scope',
function ($scope) {
$scope.firstName = "Sreekanth";
}]);
myapp.controller("ChildController", ["$scope",
function ($scope) {
$scope.lastName = "Reddy";
}]);
</script>
Mark Up Code :
<body
ng-app="myapp">
<div ng-controller="ParentController">
First Name defined in Parent Controller.<br
/>
Last Name defined in child Controller.<br
/><br />
First Name in Parentcontroller : {{firstName}} <br />
Last Name in ParentController : {{lastName}} <br /><hr />
<div ng-controller="ChildController">
First Name in Parentcontroller :
{{firstName}} <br />
Last Name in ParentController :
{{lastName}} <br />
</div>
</div>
</body>
Result :
No comments:
Post a Comment