Post
Ask Question

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 the child controller will inherit the $scope of its parent controller.

It has two types.

1. $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.

$root scope

Now you create your project.

HTML file

Complete code

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script>
            var app = angular.module('app', []);
            app.controller('AdminController', ['$scope', function ($scope) {
                $scope.Admin1name = 'Shiva';
                $scope.Name = 'Shukla ';
            }]);
            app.controller('SalsemanController', ['$scope', function ($scope) {
                $scope.salsemanname = 'Rakesh';
                $scope.Name = 'Kumar ';
            }]);
            app.controller('UserController', ['$scope', function ($scope) {
                $scope.Name = 'Rahul';
            }]);
        </script>
    </head>
    <body>
        <p>Controller Inheritance</p>
        <div ng-app="app" ng-controller="AdminController"> Admin1name : {{ Name }} {{ Admin1name }}
            <div ng-controller="SalsemanController"> Salsemanname : {{ Name }} {{ salsemanname }} {{ Admin1name }}
                <div ng-controller="UserController"> User name : {{ Name }} {{ salsemanname }} {{ Admin1name }} </div>
            </div>
        </div>
    </body>
</html>

Output

result

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

JavaScript object

Controller

Complete code

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.Adminname = "Shiva";
        });
    </script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <h1>{{Adminname}}</h1>
        </div>
    </body>
</html>

Output

Output

Expression

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

Expression

Complete code

<!DOCTYPE html>
<html>
    <head>
        <title>Expression Demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    </head>
    <body>
        <div ng-app>
            <h2>Expressions in AngularJS</h2> The sum of 2 + 5 is = <strong>{{2 + 5}}</strong>.
        </div>
    </body>
</html>

Output

Run


Similar Articles