AngularJS Scopes

The scope is an object that refers to the application model.
It is used to specified the binding part (expression) between the HTML and the controller.
It plays a role of linking controller with the views.
It is accessible for both the view and the controller.
Scopes are organized in hierarchical structure which imitate the DOM structure of the applications.
Scopes can watch binding(expression) and propagate events.
Scopes can be nested to limit access to the properties of application component, while giving access to shared model properties.
In AngularJS, the nested scopes are either child scope or isolated scopes.
The child scope is inheriting properties from the base or parent scope.
An isolated scopes does not prototypically (“child scope”) inherit from its parent scope.

Syntax for scope in Angular JS:

myApp.controller('myController', function($scope) {
    $scope.myVariable = "value";
});

Sample coding for scope in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <h2>Wikitechy scope in AngularJS</h2>
        <div ng-app="myApp" ng-controller="scopeCtrl">
        {{ msg }}
        </div>
        <script>
            var app = angular.module('myApp', [ ]);
            app.controller('scopeCtrl', function($scope) {
            $scope.msg = "Welcome To AngularJS Tutorials";
            });
        </script>
    </body>
</html>

Data:

The msg data been defined for our AngularJS Application.

msg = "Welcome To AngularJS Tutorials";

Logic:

Controller logic for the AngularJS application.

app.controller('scopeCtrl', function($scope)
    {
        $scope.msg = "Welcome To AngularJS Tutorials";
    });

HTML:

Viewable HTML contents in AngularJS Application.

<div ng-app="myApp" ng-controller="scopeCtrl">
    {{ msg }}
</div>

Code Explanation for scope in AngularJS:

AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
The AngularJS application is defined by ng-app="myApp". The application runs inside the <div> tag. It’s also used to define a <div> tag as a root element.
The ng-controller=”scopeCtrl” is an AngularJS directive. It is used to define a controller name as “scopeCtrl”.
{{ msg }} is a used to bind the controller value by using the scope object.
angular.module function is used to create a module. Here has passed an empty array to it.
Here we have declared a controller scopeCtrl module using apps.controller() function.
The value of the controller modules is stored in scope object. In AngularJS, $scope is passed as first argument to apps.controller during its constructor definition.
Here we have set the value of $scope.msg as “Welcome To AngularJS Tutorials” which are to be used to display the {{ msg }} value in the HTML <div> element.

Sample output:

The output displays a message of a string {{ msg }} by using a $scope object

PDF

AngularJS Scopes

Syntax for scope in Angular JS:

Sample coding for scope in AngularJS:

Data:

Logic:

HTML:

Code Explanation for scope in AngularJS:

Sample output:

Related Searches to angularjs scopes

Wikitechy

Join our Community

Other Languages