AngularJS Scope

1. What is Angular Js scope?

The Scope which plays the role of joining the controller with the views.

The scope contains model data.

They hold the model data that we need to pass to view the scope is available for both view and controller.

 

2.How to use the scope?

In angular js application, there is

view: view is the HTML part

model: The model is the data available for current view.

controller: controller is javascript function for change/remove/control the data.

so, here scope is a model.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" ng-controller="myController">
<h2> {{name}}</h2>
</div>
<script>
var myFirstApp= angular.module('myFirstApp', []);
myFirstApp.controller('myController', function($scope) {
$scope.name = 'Ebc';
});
</script>
</body>
</html>

 

3. What is root scope?

Every Application has a single root scope. Scopes provide separation between the model and view.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myFirstApp">
<p>the root Scope's fruit:</p>
<h1>{{ fruit }}</h1>
<div ng-controller = "myController">
<p>the  Scope of controller fruit:</p>
<h1>{{ fruit }}</h1>
</div>
<p>the rootScope's fruit:</p>
<h1>{{ fruit }}</h1>
<script>
var myFirstApp= angular.module('myFirstApp', []);
myFirstApp.run( function($rootScope) {
    $rootScope. fruit = 'apple';
});
myFirstApp.controller('myController', function($scope){
$scope. fruit = "mango";
});
</script>
</body>
</html>