Start With AngularJS: Part 3

Before reading this article, I highly recommend reading the previous part of the series:

Here we are reading scope & expression.

$Scope Inheritance

If you define nested controllers then child controller will inherit the $scope of its parent controller.

It has two types:

$root Scope: An app can have only one $root scope which will be shared among all the components of an app. It is available in the entire application. It acts like a global variable.
types of scope

Now you create your project.

  1. Open old visual studio project.

  2. Add new html file with name of inheritance.

    root Scope

    Complete code
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4.     <head>  
    5.         <title>Demo</title>  
    6.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
    7.             </script>  
    8.             <script>  
    9.             var app = angular.module('app', []);  
    10.             app.controller('AdminController', ['$scope', function ($scope)  
    11.             {  
    12.                 $scope.Admin1name = 'Shiva';  
    13.                 $scope.Name = 'Shukla ';  
    14.             }]);  
    15.             app.controller('SalsemanController', ['$scope', function ($scope)  
    16.             {  
    17.                 $scope.salsemanname = 'Rakesh';  
    18.                 $scope.Name = 'Kumar ';  
    19.             }]);  
    20.             app.controller('UserController', ['$scope', function ($scope)  
    21.             {  
    22.                 $scope.Name = 'Rahul';  
    23.             }]);  
    24.             </script>  
    25.     </head>  
    26.   
    27.     <body>  
    28.         <p>Controller Inheritance</p>  
    29.         <div ng-app="app" ng-controller="AdminController"> Admin1name : {{ Name }} {{ Admin1name }}  
    30.             <div ng-controller="SalsemanController"> Salsemanname : {{ Name }} {{ salsemanname }} {{ Admin1name }}  
    31.                 <div ng-controller="UserController"> User name : {{ Name }} {{ salsemanname }} {{ Admin1name }} </div>  
    32.             </div>  
    33.         </div>  
    34.     </body>  
    35.   
    36. </html>  
    Output:

    result

$Scope: $Scope is a JavaScript object that refers to the application model. It acts as glue between controller and view. $scope is passed as first argument to controller during its constructor definition.

 JavaScript object

controller

Complete code

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  
  4.         </script>  
  5.         <script>  
  6.         var app = angular.module('myApp', []);  
  7.         app.controller('myCtrl', function ($scope)  
  8.         {  
  9.             $scope.Adminname = "Shiva";  
  10.         });  
  11.         </script>  
  12.   
  13.         <body>  
  14.             <div ng-app="myApp" ng-controller="myCtrl">  
  15.                 <h1>{{Adminname}}</h1> </div>  
  16.         </body>  
  17.   
  18. </html>  
Output

Output

Expression

Expressions are used to bind application data to HTML. AngularJS expressions can be written inside double braces: {{expression}}. It used for bindings to insert dynamic values into the html pages.

Expression

Complete code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <title>Expression Demo</title>  
  6.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.             </script>  
  8.     </head>  
  9.   
  10.     <body>  
  11.         <div ng-app>  
  12.             <h2>Expressions in AngularJS</h2> The sum of 2 + 5 is = <strong>{{2 + 5}}</strong>. </div>  
  13.     </body>  
  14.   
  15. </html>  
Output

run