AngularJS

What Is Scopes In AngularJS?

The scope is the binding part between the JavaScript (controller) and the HTML (view).

If we consider an AngularJS application to consist of:

Model – which is the data available for the current view.
View – which is the HTML.
Controller – which is the JavaScript function that controls/makes/changes/removes the data.

Then the scope is the Model.

A scope is a JavaScript object with properties and methods, which are available for the view and the controller both.

$scope object pass as an argument, when we make a controller in AngularJS.

Example

Open the Example1.html file and add the code in it.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <title></title>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h2>{{title}}</h2>
    </div>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope) {
            $scope.title = "The CodeHubs";
        });
    </script>
</body>
</html>

If we make changes in the view, the model and the controller will be updated automatically:

Application explained:

The ng-app=”myApp” directive tells that the <div> element is the “owner” of an AngularJS application.
The ng-controller=”myCtrl” is defined as a JavaScript object with $scope as an argument.
The $scope refers to application which uses the myCtrl object.
When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties automatically.
In the view, we just refer to a property name (like {{title}}), we don’t have to use the prefix $scope.

Output:

Root Scope

All applications have a $rootScope. The rootScope is available in the entire application. $rootScope is the scope created on the HTML element that holds the ng-app directive.

If a variable has the same name in both the rootScope and in the current scope, the application uses the one in the current scope.

Example

Open the Example1.html file and add the code in it.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <title></title>
</head>
<body ng-app="myApp">

    <h1>{{title}}</h1>

    <div ng-controller="myCtrl">
        <h1>{{title}}</h1>
    </div>

    <h1>{{title}}</h1>

    <script>
        var app = angular.module('myApp', []);
        app.run(function ($rootScope) {
            $rootScope.title = 'The rootScope';
        });
        app.controller('myCtrl', function ($scope) {
            $scope.title = "The Current Scope";
        });
    </script>
</body>
</html>

A variable named “title” exists in both the rootScope and in the controller’s scope.

Output:

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.