AngularJs Scopes

What is Angular Scopes? How is work?

We have seen what is AngularJs and what are the different modules and components does AngularJs have and are well aware with the Views and Controllers in AngularJs as well.

We know that the view represents whatever (data from data model) we want to represent but how they communicate to each other? Well, here scope in AngularJs comes into picture.

So, scope is something that contains the model data and is an object that is shared between Views and Controller.

In a word we can say that scope works as a glue between view and controller and facilitate them to communicate with each other.

The controller sets the properties in scope and view bind those properties to show the data that the model contains.


I will pick up the example that I have given in previous articles.

The angular code sample as given below
var app = angular.module("AngularApp", ['ngRoute']);
app.controller('exampleController', function ($scope) {
    $scope.textVal = " ";
});

The HTML code sample as given below
<div ng-app="AngularApp">
    <div ng-controller="exampleController">
        <label>Please enter something to show : </label><input ng-model="textVal">
        <span ng-bind="textVal"></span>
    </div>
</div>

The full live code (Angular + HTML) sample as given below
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Angular Demo</title>
    <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var myApp = angular.module("AngularApp", ['ngRoute']);
        myApp.controller('exampleController', function ($scope) {
            $scope.textVal = " ";
        });
    </script>
</head>

<body ng-app="AngularApp">
    <div ng-controller="exampleController">
        <label>Please enter something to show : </label>
        <input ng-model="textVal">
        <span ng-bind="textVal"></span>
    </div>
</body>
</html>

In the above example, the controller sets a property, textVal to the scope and the same textVal property is associated with in the input with ng-model so when AngularJS processes the ng-model directive in the view, it starts listening for change events on that input element and on the scope's textVal property. If the value of textVal changes, the input will update, and if the input changes, textVal updates and so the span update which reflect the changed value.

The Angular code sample as given below
var app = angular.module("AngularApp",['ngRoute']);
app.controller('exampleController', function ($scope) {
    $scope.textVal = " ";
});

app.controller('helloController', function ($scope) {
    $scope.textVal = " ";
});

The HTML code sample as given below
<div ng-app="AngularApp">
    <div ng-controller="exampleController">
        <label>Please enter something to show : </label>
        <input ng-model="textVal">
        <span ng-bind="textVal"></span>
    </div>
    <div ng-controller="helloController">
        <label>Please enter something to show : </label>
        <input ng-model="textVal">
        <span ng-bind="textVal"></span>
    </div>
</div>

The Full Live code (Angular + HTML) as given below
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Angular Demo</title>
    <script src=" https://code.angularjs.org/1.3.14/angular.js"></script>
    <script>
    var app = angular.module("AngularApp",['ngRoute']);
    app.controller('exampleController', function ($scope) {
        $scope.textVal = " ";
    });

    app.controller('helloController', function ($scope) {
       $scope.textVal = " ";
    });
    </script>
</head>

<body ng-app="AngularApp">
    <div ng-controller="exampleController">
        <label>Please enter something to show : </label><input ng-model="textVal">
        <span ng-bind="textVal"></span>
    </div>
    <div ng-controller="helloController">
        <label>Please enter something to show : </label><input ng-model="textVal">
        <span ng-bind="textVal"></span>
    </div>
</body>
</html>

In this example everything is same as the previous one but the difference is here we have two controllers and the input and span both are using the same attribute textVal but they’re completely independent since they are bound to different scope. Go to live demo link

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book