Angular Js : Root Scope of an Application

When we are dealing with scopes in an angular Js app it is important to know which scope you are dealing with, at any time. If you have only one scope in your application it is not necessary to be careful about what scope you are using, but for larger application it is not the case, there can be sections in the HTML DOM which can only access certain scopes.

 However all applications have a root scope that is available in the entire application. Here is an simple example on how to access root scope in an Angular Js application.

 Module and Controller for the app

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["DOG", "BIRD", "COW"];
    $rootScope.lastname = "ANIMALS";
});


Complete code

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>Names of {{lastname}}:</h1>

<ul>
  <li ng-repeat="x in names">{{x}} is one of {{group}}
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["DOG", "BIRD", "COW"];
    $rootScope.group = "ANIMALS";
});
</script>

</body>
</html>




1 comment:

  1. A debt of gratitude is in order for offering such data to us because of which my few ideas have been cleared. thermal scope

    ReplyDelete