What is Scope in AngularJs

Hi everyone in this blog I’m explaining about Scope in angularjs.

Introduction:

Scope is a special javascript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object.

<script>
    var mainApp = angular.module('mainApp', []);
 
    mainApp.controller('shapeController', function ($scope) {
        $scope.message = 'In shape controller';
        $scope.type = 'Shape';
    });
</script>

Following are the important points to be considered in above example.

  • v  $scope is passed as the first argument to the controller during its constructor definition.
  • v  $scope.message and $scope.type are the models which are to be used in the HTML page.
  • v  We've set values to models which will be reflected in the application module whose controller is shapeController.
  • v  We can define functions as well in $scope.
Scope Inheritance:

Scope is controllers specific. If we defines nested controllers then child controller will inherit the scope of its parent controller.

<script>
    var mainApp = angular.module('mainApp', []);
 
    mainApp.controller('shapeController', function ($scope) {
        $scope.message = 'In shape controller';
        $scope.type = 'Shape';
    });
 
    mainApp.controller('circleController', function ($scope) {
        $scope.message = 'In circle controller';
    });
</script>

Following are the important points to be considered in above example.

  • v  We've set values to models in shapeController.
  • v  We've overridden message in child controller circleController. When 'message' is used within the module of controller circleController, the overridden message will be used.
Example:

The following example will showcase all the above-mentioned directives.

<html>
<head>
    <title>Angular JS Forms</title>
</head>
<body>
    <h2>AngularJS Sample Application</h2>
    <div ng-app='mainApp' ng-controller='shapeController'>
        <p>{{message}}
            <br />
            {{type}} </p>
        <div ng-controller='circleController'>
            <p>{{message}}
                <br />
                {{type}} </p>
        </div>
        <div ng-controller='squareController'>
            <p>{{message}}
                <br />
                {{type}} </p>
        </div>
    </div>
    <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js'></script>
    <script>
        var mainApp = angular.module('mainApp', []);
 
        mainApp.controller('shapeController', function ($scope) {
            $scope.message = 'In shape controller';
            $scope.type = 'Shape';
        });
 
        mainApp.controller('circleController', function ($scope) {
            $scope.message = 'In circle controller';
        });
 
        mainApp.controller('squareController', function ($scope) {
            $scope.message = 'In square controller';
            $scope.type = 'Square';
        });
 
    </script>
</body>
</html>
Output:

What is Scope in AngularJs

Last updated:2/22/2018 1:38:50 AM
Anonymous User

Anonymous User

I am a content writter !

0 Comments

Leave Comment