Here we will learn scopes ($scope) in angularjs with example, how to define and use scope variables in angularjs with example, how to update scope variable in angularjs and how to use same scope variable in multiple controllers in angularjs with example..
In angularjs, we have a two main parts one is view (HTML) and another one is controllers. We know that the view represents whatever (data from data model) the data we want to show it on page and controller will hold all the variables and functions which we used to show it on page but how they (view and controller) communicate to each other? Well, here scope came into a picture in angularjs.
Generally, when we create controller in angularjs we will send $scope object as a parameter and set controller properties (variables and functions) in $scope object. In view we can access those $scope properties and show data that values in page.
So, scope is an object which holds variables and functions in controller and allow us to access that data between Views and Controller.
In simple words, we can say that scope works as a glue between view (html) and controller and facilitate them to communicate with each other. The scope values will available in both view and controller.
Following is the syntax of using scope in angularjs applications.
<script type="text/javascript">
var app = angular.module('angularscopeapp', []);
app.controller('angularctrl', function ($scope) {
$scope.fname = "Welcome to";
$scope.lname = "Tutlane";
});
</script>
<div ng-app="angularscopeapp" ng-controller="angularctrl">
First Name: {{fname}}<br />
Last Name: {{lname}}<br />
Full Name: <b>{{fname +" "+ lname}}</b>
</div>
If you observe above syntax while defining controller in angularjs we are sending $scope object as an argument and assigned parameters (fname, lname) to $scope object.
Once we add properties to $scope object in controller we will get access to use those properties in view (HTML).
In view we can access those $scope properties by defining like {{fname}} we don’t need to prefix with $scope.
We will see how to use $scope in angularjs application with complete example
Following is the example of using scope in angularjs application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Scope Object Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularscopeapp', []);
app.controller('angularctrl', function ($scope) {
$scope.fname = "Welcome to";
$scope.lname = "Tutlane";
$scope.getname = function () {
return $scope.fname +" "+ $scope.lname;
};
});
</script>
</head>
<body ng-app="angularscopeapp">
<div ng-controller="angularctrl">
First Name: {{fname}}<br />
Last Name: {{lname}}<br />
Full Name: <b>{{getname()}}</b>
</div>
</body>
</html>
In above example if you observe we defined variables and functions with $scope object and accessing those values in html. Now we will run and see the output of above angularjs application.
Following is the result of using scope in angularjs applications.
First Name: Welcome to
Last Name: Tutlane
Full Name: Welcome to Tutlane
In angularjs, when we change scope variable value in view (HTML) automatically it will update in model and controller. We will see how to update scope variables with example.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Scope Object Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularscopeapp', []);
app.controller('angularctrl', function ($scope) {
$scope.txtval="Welcome to Tutlane";
});
</script>
</head>
<body>
<div ng-app="angularscopeapp" ng-controller="angularctrl">
Enter Name : <input type="text" ng-model="txtval" /><br /><br />
Textbox Value: <b>{{txtval}}</b>
</div>
</body>
</html>
In the above example, the controller sets a property txtval to the scope and the same txtval 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 txtval property.
If we change the value of txtval in view automatically it will update in model and controller. Now we will run the application and check the output.
If you observe output when we are changing text in textbox automatically model and controller scope value updating on change event.
For this questions answer is YES, we can define same scope variable in multiple controllers. Generally, scope variables are specific to controller so if we define same scope variable name in multiple controllers it will not affect variable in other controller. We will see this with simple example.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Scope Object Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularscopeapp', []);
app.controller('exampleController', function ($scope) {
$scope.textVal = " ";
});
app.controller('helloController', function ($scope) {
$scope.textVal = " ";
});
</script>
</head>
<body ng-app="angularscopeapp">
<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 above angularjs example 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 controllers scope value.
Now if we run above example we will get output like as shown below. If you observe below output when we change textbox values in controller only that respective model and scope values are updating.