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>

blog

What is Scope in AngularJs

Introduction:

Scope Inheritance:

Example:

Output:

Leave a Comment