Angular JS Scopes

Scope Inheritance

by Paola D'Antonio

HTML

<html>
   <head>
      <title>Angular JS Scopes</title>
   </head>
   
   <body>
      <h2>Angular JS Scopes</h2>
      
      <div ng-app = "mainApp" >
       
       <div ng-controller = "shapeController" id="shape">
        <p>{{message}} <br/> {{type}} </p>
       </div>  
       
         <div ng-controller = "circleController">
         <div id="circle">
            <p>{{message}} <br/> {{type}} </p>
         </div>
         </div>
         
         <div ng-controller = "squareController">
         <div id="square">
            <p>{{message}} <br/> {{type}} </p>
         </div>
         </div>
         
         
			
    
		
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
           
   </body>
</html>

CSS

#shape{
  
  background-color: lightblue;
  
}
#circle{
  
  background-color: lightpink;
  
}
#square{
  
  background-color: lightblue;
  
}

TypeScript

var mainApp = angular.module("mainApp", []);
         
         mainApp.controller("shapeController", function($scope) {
            $scope.message = "In shape controller";
            $scope.type = "Shape";
         });
         
         mainApp.controller("circleController", function($scope) {
            $scope.message = "In circle controller";
         });
         
         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });