¿Cómo se usan los prefijos $y $$de AngularJS?

  • ps

    El $en AngularJs es un objeto incorporado. Contiene datos y métodos de la aplicación.

    El alcance ($) actúa como un enlace entre el controlador y la vista.

    Alcance ($)

    Dentro de la función del controlador se pueden adjuntar las propiedades y los métodos al ámbito ($). La directiva Expression , ng-model o ng-bind se puede usar para mostrar los datos del alcance en la vista.

    <!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>

    Producción:

    Ejemplo 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>

    Producción:

    $rootScope:

    La aplicación AngularJS consta de un único $rootScope. Todos los demás $scope son objetos secundarios. $rootscope tiene propiedades y métodos adjuntos que estarán disponibles para todos los controladores.

    Método

    Descripción

    $nuevo Se utiliza para crear un nuevo ámbito secundario.
    $ver Se utiliza para registrar una devolución de llamada que se ejecutará cada vez que cambie la propiedad del modelo.
    $verGrupo

    Se utiliza para registrar una devolución de llamada que se ejecutará cada vez que cambien las propiedades del modelo.

    Especificamos una array de propiedades en this.

    $relojColección Se utiliza para registrar una devolución de llamada que se ejecutará cada vez que cambie la propiedad del objeto modelo o de la array.
    $resumen Procesa todos los observadores del alcance actual y sus hijos.
    $destruir Elimina el ámbito actual del ámbito principal.
    $evaluar Ejecutar expresiones en el ámbito actual.
    $emitir Se utiliza para enviar el evento especificado hacia arriba hasta $rootScope.
    $transmitir Se utiliza para enviar el evento especificado hacia abajo hasta el ámbito secundario.

    Ejemplo 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>

    Producción:

  • $$

    $$en esto se tratan como variables privadas. Usamos $$para evitar conflictos de variables internas y no exponer para uso externo.

    Algunos de ellos se enumeran a continuación: –

    $$observadores, $$observadores, $$childHead, $$childTail, $$ChildScope, etc.

    Método

    Descripción

    $$observadores Contiene todos los relojes asociados con el visor.
    $$asyncQueue Es una cola de tareas asíncrona. Se consume en cada resumen.
    $$postDigest(fn) Ejecuta fn después del siguiente ciclo de resumen.
    $$destruido Destruye el alcance.

    Sintaxis:

    $$('.selector');

    o

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

    Una forma común de comunicación entre los módulos de la aplicación, con la ayuda de la funcionalidad principal de AngularJS, es establecer una conexión entre los controladores usando $parent, $$childHead, $$nextSibling.

    Ejemplo:

    <!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>

    Producción:

    La salida anterior se producirá cuando agreguemos $$, ya que actúa como un objeto privado.

Por lo tanto, para evitar colisiones de nombres accidentales al escribir su código, angular prefija los objetos públicos con $y los objetos privados con $$.

Publicación traducida automáticamente

Artículo escrito por sharmaanushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *