1. What is Angular Js scope?

The Scope which play 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>