Open In App

How AngularJS prefixes $ and $$ are used?

Improve
Improve
Like Article
Like
Save
Share
Report
  • $:

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

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

    Scope($)

    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.




    <!DOCTYPE html>
    <html>
    <head>
        <script src=
        </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:




    <!DOCTYPE html>
    <html>
        <script src=
      </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:




    <!DOCTYPE html>
    <html>
    <head>
        <script src=
       </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');

    or

    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:




    <!DOCTYPE html>
    <html>
        <script src=
      </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:

    The above output will be produced when we add $$, since, it acts as private object.

So, to prevent accidental name collisions while writing your code angular prefixes public objects with $ and private objects with $$.



Last Updated : 31 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads