How AngularJS prefixes $ and $$ are used?

Last Updated : 31 Jul, 2020

The $ in AngularJs is a built-in object.It contains application data and methods.

The scope($) acts as a link between controller and view.

Inside the controller function the properties and the methods to the scope($) can be attached. Expression, ng-model, or ng-bind directive can be used to display the scope data in the view.

html

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
    </script>
</head>
<body ng-app="Ng">
<h1>$scope</h1>
    <div ng-controller="myController">
        Message: <br />
        {{message}}<br />
        <span ng-bind="message"></span> <br />
        <input type="text" ng-model="message" /> 
    </div>
    <script>
        var ngApp = angular.module('Ng', []);

        ngApp.controller('myController', function ($scope) {
            $scope.message = "GFG!";        
        });
    </script>
</body>
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text" 
                               ng-model="firstName" /><br />
            Middle Name: <input type="text" 
                                ng-model="middleName" /><br />
            Last Name: <input type="text" 
                              ng-model="lastName" /><br />
            <br />
         Full Name: {{firstName +middleName+ " " + lastName}}
        </div>

        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function ($scope) {
                $scope.firstName = "Geeks";
                $scope.middleName = "for";
                $scope.lastName = "Geeks";
            });
        </script>
    </body>
</html>

Output:

$rootScope:

The AngularJS application consists of a single $rootScope. All the other $scope are child objects.$rootscope has properties and methods attached to it which will be available be to all the controllers.

Method	Description
$new	It is used to create new Child Scope
$watch	It is used to Register a callback which is to be executed whenever the model property changes.
$watchGroup	It is used to register a callback which is to be executed whenever model properties changes. We specify an array of properties in this.
$watchCollection	It is used to register a callback which is to be executed whenever model object or array property changes.
$digest	It processes all of the watchers of the current scope and its children.
$destroy	Remove the current scope from parent scope.
$eval	Execute expressions on the current scope.
$emit	It is used to dispatch the specified event upwards till $rootScope.
$broadcast	It is used to dispatch the specified event downwards till child Scope.

Example 3:

html

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
   </script>
</head>
<body ng-app="Ng">
<h1> $watch </h1>
    <div ng-controller="Controller">
        Enter Message: <input type="text" ng-model="message" /> <br />
        New : {{newMessage}} <br />
        Old : {{oldMessage}} 
    </div>
    <script>
        var ngApp = angular.module('Ng', []);
    
        ngApp.controller('Controller', function ($scope) {
            $scope.message = "GFG!";

            $scope.$watch('message', function (newValue, oldValue) {
                $scope.newMessage = newValue;
                $scope.oldMessage = oldValue;
            });
        });
    </script>
</body>
</html>

Output:

$$ in this are treated as private variables. We use $$ to avoid the internal variable conflicts and not to expose for external use.

Some of them are listed below:-

$$observers, $$watchers, $$childHead, $$childTail, $$ChildScope etc.

Method	Description
$$watchers	It contains all of the watches associated with the scope
$$asyncQueue	It is a async task queue.It is consumed on every digest
$$postDigest(fn)	It executes fn after the next digest cycle.
$$destroyed	It destroys the scope.

Syntax:

$$('.selector');

element.all(by.css('.selector'));

A common ways of communication between modules of application, with the help of core AngularJS functionality is establishing a connection between controllers using $parent, $$childHead, $$nextSibling.

Example:

html

<!DOCTYPE html>
<html>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text"
                               ng-model="firstName" /><br />
            Middle Name: <input type="text" 
                                ng-model="middleName" /><br />
            Last Name: <input type="text"
                              ng-model="lastName" /><br />
            <br />
       Full Name: {{firstName +middleName+ " " + lastName}}
        </div>

        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function ($scope) {
                $$scope.firstName = "Geeks";
                $$scope.middleName = "for";
                $$scope.lastName = "Geeks";
            });
        </script>
    </body>
</html>