Quick Contact


    What is AngularJS Scope?

    An AngularJS Scope is a built-in object. It is available for both view (HTML part) and controller. For every controller, angular creates or injects $scope object in angular. Therefore, the behavior attached in one controller cannot be accessed by another controller in AngularJS.

    During the constructor definition, the first argument passed through controller is the $scope.

    Syntax
    	< script>
    	varmainApp = angular.module("mainApp", []);
    	mainApp.controller("shapeController", function($scope) {
    	$scope.message = function(Fname,Lname)
    	{
    	return Fname + Lname;
    	}
    	});
    	< /script>
    	
    Use AngularJS Scope

    To define member variables, AngularJS scope is used within a controller. It can contain variables that are the application data and methods.

    Syntax-
    	< script>
    	varmainApp = angular.module("mainApp", []);
    	mainApp.controller("shapeController", function($scope) {
    	$scope.message = "Property is defined here";
    	});
    	< /script>
    	

    In the above code “message” is the member variable and its value is defined using $scope object. So wherever we display a message in view part its value will now get displayed as “property is defined here”.

    • It is used to transfer data from view to controller as well as to transfer data from a controller to view.
    • It acts as a linking between view and controller.
    • Functions can be defined using a $scope.

    Enroll Yourself in Live Classes For Online Summer Training.

    $rootscope

    An angular application contains a single $rootscope. All other $scope present in an angular application are the child objects. The $rootscope object is the parent of all other $scope object.

    The behavior attached to $rootscope is available to all the controllers present in that particular angular application. It means the properties and methods attached to it can be accessed by all controllers.

    NOTE-

    The difference between $scope object and $rootscope object is that behavior attached with $rootscope is available for all the controllers while behavior attached with $scope is attached with a specific controller in which it is defined.

    	< !DOCTYPE html>
    	< html>
    	< head>
    	< title>AngualrJS Controller< /title>
    	< scriptsrc="~/Scripts/angular.js">< /script>
    	< /head>
    	< body ng-app="myNgApp">
    	< div ng-controller="parentController">
    	Controller Name: {{controllerName}}< br />
    	Message: {{msg}}< br />
    	< div style="margin:10px 0 10px 20px;"ng- controller="childController">
    	Controller Name: {{controllerName}}< br />
    	Message: {{msg}}< br />
    	< /div>
    	< /div>
    	< div ng-controller="siblingController">
    	Controller Name: {{controllerName}}< br />
    	Message: {{msg}}< br />
    	< /div>
    	< script>
    	varngApp = angular.module('myNgApp', []);
    	ngApp.controller('parentController', function($scope, $rootScope){
    	$scope.controllerName = "parentController";
    	$rootScope.msg = "Common property of all controller ";
    	});
    	ngApp.controller('childController', function($scope){
    	$scope.controllerName = "childController";
    	});
    	ngApp.controller('siblingController', function($scope){
    	$scope.controllerName = "siblingController";
    	});
    	< /script>
    	< /body>
    	< /html>
    	
    Output-

    Controller Name: parentController

    Message: This property is same for all controller.

    Controller Name: childController

    Message: This property is same for all controller.

    Controller Name: siblingController

    Message: Common property of all controller.

    In the above code the property message is defined in parent controller only but since it is attached with $rootscope object, therefore, it remains the same for all the controller.

    Methods of $Scope Object
    1. $eval() –

      The current scope expression is executed and the result is displayed.

    2. $apply() –

      Using this method an expression can be executed in angular outside the angular framework.

    3. $new() –

      A new child can be created using a $new method of $scope object.

    4. $on() –

      A callback for an event is registered using $on a method of $scope object.

    5. $destroy() –

      From parent scope, a current scope can be removed using $destroy method. As well as all its child scope is also removed using from parent scope.

    6. $emit() –

      A particular event is dispatched upwards till $rootscope using $emit method.

    7. $broadcast() –

      A particular event is dispatched downwards till $rootscope using a $broadcast method.

    What is AngularJS Scope?
    Life Cycle of AngularJS Scope

    In the flow ofjavascript code, whenever an event is received by browser then it executes a javascript callback corresponding to it. And after the completion of callback, DOM objects are re-rendered by a browser. If any javascript code is executed outside the context of angularJS by browser then angularJS remain unaware with the changes in the model. To detect the model change in angularJS $apply API is used.

    1. Creation –

      During bootstrap of an application using $injector, root scope is created. And during the linking of a template, many of the directives creates new child scope.

    2. Watcher Registration –

      Model values can propagate to DOM using a $watch

    3. Model Mutation –

      To observe mutation in a proper way, an API known as $apply is used.

    4. Mutation Observation –

      After $apply, a $digest is performed on the root scope in angular JS.

    5. Scope Destruction –

      If child scope is no longer in use, then it should be destroyed. Child scope creator is responsible to destroy the child scope if no longer in use. Using API $scope.$destroy() child scope creator can do so. Destroying an unused child scope will release memory that is being used by it and stop model propagation too.

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.