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

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=
"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>

Producción:

Ejemplo 2:

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

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=
"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>

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');

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=
"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>

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 Cancelar la respuesta