Every controller has an associated $scope object.
The $scope is a built-in or predefined object in an AngularJS, which contains application data and methods.
It transfers data from the controller to view and vice-versa.
It is used to bind
the data between the HTML (view) and the
JavaScript (controller).
Example
1:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<h1>{{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "suryosnata";
});
</script>
</body>
</html>
Example
2:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<input ng-model="age">
<h1>My age is {{age}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.age
= "25";
});
</script>
<p>When you change the age in the input field,
the changes will affect the model, and it will also affect theage property in
the controller.</p>
</body>
</html>
Example
3:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
<ul>
<li
ng-repeat="y in fruits">{{y}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fruits = ["apple", "orange",
"mango"];
});
</script>
$rootScope
An AngularJS application has a single $rootScope. All the other $scope objects are child objects.
The properties and methods
attached to $rootScope will be available to all the controllers.
The following example
shows the $rootScope and $scope object.
Example
4:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<p>Root value is</p>
<h1>{{name}}</h1>
<div ng-controller="myCtrl">
<p> controller's value is</p>
<h1>{{name}}</h1>
</div>
<p>Root value is</p>
<h1>{{name}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.name = 'suryosnata';
});
app.controller('myCtrl', function($scope) {
$scope.name = "surya";
});
</script>
</body>
</html>
Python is an open-source, high level, interpreted programming language which offers great opportunities for object-oriented programming. Choosing a python training program from Red Prism Group, which is best training institute for python in noida.
ReplyDelete