Home > DeveloperSection > Blogs > What is Scope in AngularJs

What is Scope in AngularJs


Angular JS Angularjs Scope  Angularjs Controller 
Ratings:
0 Comment(s)
 854  View(s)
Rate this:

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 first argument to controller during its contructor defintion.

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 are 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 module of controller circleController, the overridden message will be used.

Example:

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:


Don't want to miss updates? Please click the below button!

Follow MindStick