Misko ya dio una excelente descripción de cómo funcionan los enlaces de datos, pero me gustaría agregar mi opinión sobre el problema de rendimiento con el enlace de datos.

Como dijo Misko, alrededor de 2000 enlaces es donde empiezas a ver problemas, pero no deberías tener más de 2000 piezas de información en una página de todos modos. Esto puede ser cierto, pero no todos los enlaces de datos son visibles para el usuario. Una vez que comience a construir cualquier tipo de widget o cuadrícula de datos con enlace bidireccional, puede fácilmente hit 2000 fijaciones, sin tener una mala ux.

Considere, por ejemplo, un combobox donde puede escribir texto para filtrar las opciones disponibles. Este tipo de control podría tener ~150 elementos y aún así ser altamente utilizable. Si tiene alguna característica adicional (por ejemplo, una clase específica en la opción seleccionada actualmente), comienza a obtener 3-5 enlaces por opción. Coloque tres de estos widgets en una página (por ejemplo, uno para seleccionar un país, el otro para seleccionar una ciudad en dicho país y el tercero para seleccionar un hotel) y ya estás entre 1000 y 2000 enlaces.

O considere una cuadrícula de datos en una aplicación web corporativa. 50 filas por página no es irrazonable, cada uno de los cuales podría tener 10-20 columnas. Si construye esto con ng-repeats, y / o tiene información en algunas celdas que usa algunos enlaces, podría estar acercándose a 2000 enlaces solo con esta cuadrícula.

Me parece que esto es un enorme problema cuando se trabaja con AngularJS, y la única solución que he sido capaz de encontrar hasta ahora es construir widgets sin usar enlaces bidireccionales, en lugar de usar ngOnce, cancelar el registro de observadores y trucos similares, o directivas de construcción que construye el DOM con jQuery y manipulación del DOM. Siento que esto derrota el propósito de usar Angular en primer lugar.

Me encantaría escuchar sugerencias sobre otras formas de manejar esto, pero entonces tal vez debería escribir mi propia pregunta. Quería poner esto en un comentario, pero resultó ser demasiado largos para que...

TL; DR
El enlace de datos puede causar problemas de rendimiento en páginas complejas.

Revisando el objeto $scope

Angular mantiene un simple array de observadores en los objetos $scope. Si inspecciona cualquier $scope encontrará que contiene un array llamado $$watchers.

Cada observador es un object que contiene, entre otras cosas

1. Una expresión que el observador está monitoreando. Esto podría ser solo un nombre attribute, o algo más complicado.
2. Un último valor conocido de la expresión. Esto se puede comprobar contra la corriente valor calculado de la expresión. Si los valores difieren, el vigilante activará la función y marcará $scope como sucio.
3. Una función que se ejecutará si el observador está sucio.

Cómo se definen los observadores

Hay muchas maneras diferentes de definir a un observador en AngularJS.

• Puedes explícitamente $watch y attribute en $scope.

  $scope.$watch('person.username', validateUnique);
  

• Puede colocar una interpolación {{}} en su plantilla (un observador será creado para usted en la actual $scope).

  <p>username: {{person.username}}</p>
  

• Puedes pedir a una directiva como ng-model que defina el vigilante por ti.

  <input ng-model="person.username" />
  

El ciclo $digest compara a todos los observadores con su último valor

Cuando interactuamos con AngularJS a través de los canales normales (ng-model, ng-repeat, etc.), la directiva activará un ciclo de digest.

Un ciclo de compendio es un primer recorrido de profundidad de $scope y todos sus hijos. Para cada $scope object, iteramos sobre su $$watchers array y evaluar todas las expresiones. Si el nuevo valor de la expresión es diferente del último valor conocido, se llama a la función del observador. Esta función podría recompilar parte del DOM, volver a calcular un valor en $scope,AJAX request, cualquier cosa que necesites hacer.

Cada ámbito se recorre y cada expresión de vigilancia se evalúa y comprueba con el último valor.

Si se activa un observador, el $scope es sucio

Si se activa un vigilante, la aplicación sabe que algo ha cambiado y el $scope está marcado como sucio.

Las funciones Watcher pueden cambiar otros atributos en $scope o en un padre $scope. Si se ha activado una función $watcher, no podemos garantizar que nuestras otras $scopes todavía estén limpias, por lo que ejecutamos todo el ciclo de digest nuevamente.

Esto se debe a que AngularJS tiene un enlace bidireccional, por lo que los datos se pueden pasar de vuelta al árbol $scope. Podemos cambiar un valor en un $scope superior que ya tiene ha sido digerido. Tal vez cambiemos un valor en el $rootScope.

Si el $digest está sucio, ejecutamos todo el ciclo $digest de nuevo

Continuamente recorremos el ciclo $digest hasta que el ciclo de digest salga limpio (todas las expresiones $watch tienen el mismo valor que tenían en el ciclo anterior), o alcanzamos el límite de digest. De forma predeterminada, este límite se establece en 10.

Si alcanzamos el límite de digest AngularJS generará un error en la consola:{[54]]}

10 $digest() iterations reached. Aborting!

El digest es difícil para la máquina pero fácil para el desarrollador

Como puedes ver, cada vez que algo cambia en una aplicación AngularJS, AngularJS revisará cada observador en la jerarquía $scope para ver cómo responder. Para un desarrollador esto es una gran ayuda para la productividad, ya que ahora necesita escribir casi ningún código de cableado, AngularJS solo notará si un valor ha cambiado, y hará que el resto de la aplicación sea consistente con el cambio.

Desde la perspectiva de la máquina, aunque esto es muy ineficiente y ralentizará nuestra aplicación si creamos demasiados observadores. Misko ha citado una cifra de aproximadamente 4000 observadores antes de que su aplicación se sienta lenta en los navegadores más antiguos.

Este límite es fácil de alcanzar si ng-repeatJSON array por ejemplo. Puede mitigar esto usando características como el enlace único para compilar una plantilla sin crear observadores.

Cómo evitar crear demasiados observadores

Cada vez que tu usuario interactúa con tu app, cada observador de tu aplicación será evaluado al menos una vez. Una gran parte de la optimización de una aplicación AngularJS es reducir el número de observadores en su árbol $scope. Una manera fácil de hacer esto es con un enlace de tiempo.

Si tiene datos que rara vez cambiarán, puede enlazarlos solo una vez usando la sintaxis::, como así:

<p>{{::person.username}}</p>

O

<p ng-bind="::person.username"></p>

El enlace solo se activará cuando se renderice la plantilla contenedora y se carguen los datos en $scope.

Esto es especialmente importante cuando usted tiene un ng-repeat con muchos elementos.

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

Este es mi entendimiento básico. ¡Puede estar mal!

1. Los elementos se observan pasando una función (devolviendo la cosa a ser visto) al método $watch.
2. Los cambios en los elementos observados deben realizarse dentro de un bloque de código envuelto por el método $apply.
3. Al final del $apply se invoca el método $digest que va a través de cada uno de los relojes y cheques para ver si cambiaron desde la última vez que se ejecutó el $digest.
4. Si se encuentran cambios, entonces el resumen es invocado de nuevo hasta que todos los cambios se estabilicen.

En el desarrollo normal, la sintaxis de enlace de datos en el HTML le dice al compilador AngularJS que cree los relojes para usted y los métodos del controlador ya se ejecutan dentro de $apply. Así que para el desarrollador de aplicaciones es todo transparente.

Me pregunté esto por un tiempo. Sin setters, ¿cómo AngularJS nota los cambios en el objeto $scope? ¿Los sondea?

Lo que realmente hace es esto: Cualquier lugar "normal" que modifique el modelo ya fue llamado desde las entrañas de AngularJS, por lo que llama automáticamente a $apply después de que se ejecute su código. Digamos que tu controlador tiene un método que está conectado a ng-click en algún elemento. Porque AngularJS cables la llamada de ese método juntos para usted, tiene la oportunidad de hacer un $apply en el lugar apropiado. Del mismo modo, para las expresiones que aparecen directamente en las vistas, esas son ejecutadas por AngularJS por lo que hace el $apply.

Cuando la documentación habla de tener que llamar a $apply manualmente para el código fuera de AngularJS, está hablando de código que, cuando se ejecuta, no proviene de AngularJS en sí mismo en la pila de llamadas.

Explicando con Imágenes:

El enlace de datos necesita una asignación

La referencia en el ámbito de aplicación no es exactamente la referencia en la plantilla. Cuando vincula datos a dos objetos, necesita un tercero que escuche el primero y modifique el otro.

Aquí, cuando modifica el <input>, toca el data-ref3. Y el mecanismo clásico de enlace de datos cambiará data-ref4 . Entonces, cómo se moverán las otras expresiones {{data}} ?

Los eventos conducen a digest digest()

Angular mantiene un oldValue y newValue de cada enlace. Y después de cada Evento Angular, el famoso bucle $digest() revisará la lista de seguimiento para ver si algo cambió. Estos eventos angulares son ng-click, ng-change, $http completado ... El $digest() se repetirá siempre que cualquier oldValue difiera del newValue.

En la imagen anterior, se dará cuenta de que data-ref1 y data-ref2 tiene cambiar.

Conclusiones

Es un poco como el Huevo y la Gallina. Nunca se sabe quién comienza, pero espero que funcione la mayor parte del tiempo como se espera.

El otro punto es que se puede entender fácilmente el impacto profundo de un simple enlace en la memoria y la CPU. Esperemos que los escritorios sean lo suficientemente gordos para manejar esto. Los teléfonos móviles no son tan fuertes.

Obviamente no hay una comprobación periódica de Scope si hay algún cambio en los Objetos adjuntos a él. No se observan todos los objetos adjuntos al scope . Scope mantiene prototípicamente un watch watchers. Scope solo itera a través de este $$watchers cuando se llama $digest.

Angular agrega un observador a los watch observadores para cada uno de estos

1. {{expression}} - En sus plantillas (y en cualquier otro lugar donde haya una expresión) o cuando definimos ng-model.
   
2. scope alcance.watch watch ('expression/function') - En su JavaScript solo podemos adjuntar un objeto scope para que angular lo observe.

$la función watch toma tres parámetros:

1. La primera es una función watcher que solo devuelve el objeto o simplemente podemos agregar una expresión.
   

2. La segunda es una función de escucha a la que se llamará cuando haya un cambio en el objeto. Todas las cosas como Los cambios DOM se implementarán en esta función.
   

3. El tercero es un parámetro opcional que toma un booleano . Si es verdadero , angular deep observa el objeto y si es falso Angular solo hace una observación de referencia en el objeto. La implementación aproximada de watch watch se ve así

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

Hay una cosa interesante en Angular llamada Ciclo de Digestión. El ciclo digest digest comienza como resultado de una llamada a scope scope.$digerir(). Supongamos que puede cambiar un modelo scope scope en una función de controlador a través de la directiva ng-click. En ese caso AngularJS activa automáticamente un ciclo digest digest llamando a ng digest().Además de ng-click, hay varias otras directivas/servicios integrados que le permiten cambiar modelos (por ejemplo, ng-model, tim timeout, etc.) y activar automáticamente un ciclo digest digest. La implementación aproximada de digest digest se ve así.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

Si usamos la función de JavaScript setTimeout() para actualizar un modelo de ámbito, Angular no tiene forma de saber lo que podrías cambiar. En este caso, es nuestra responsabilidad llamar a manually apply() manualmente, lo que desencadena un ciclo digest digest. Del mismo modo, si tiene una directiva que configura un detector de eventos DOM y cambia algunos modelos dentro de la función handler, debe llamar a apply apply() para asegurarse de que los cambios surtan efecto. La gran idea de apply apply es que podemos ejecutar algún código que no es consciente de Angular, ese código todavía puede cambiar las cosas en el ámbito. Si envolvemos ese código en apply apply , se encargará de llamar a digest digest (). Implementación aproximada de apply apply ().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

AngularJS maneja el mecanismo de enlace de datos con la ayuda de tres potentes funciones: watch watch(),$digest () and apply apply(). La mayoría de las veces AngularJS llamará al scope scope.watch watch() y scope scope.$digest(), pero en algunos casos es posible que tenga que llamar a estas funciones manualmente para actualizarlas con nuevos valores.

$reloj() :-

Esta función se utiliza para observar cambios en una variable en el ámbito$. Acepta tres parámetros: expresión, oyente y objeto de igualdad, donde el objeto listener y equality son parámetros opcionales.

$digest() -

Esta función itera a través de todos los relojes en el objeto scope scope, y su hijo objects scope objects
(si tiene alguna). Cuando iter digest() itera sobre los relojes, comprueba si el valor de la expresión tiene cambiar. Si el valor ha cambiado, AngularJS llama al oyente con nuevo valor y antiguo valor. La función digest digest () es called cada vez que AngularJS piensa que es necesario. Por ejemplo, después de un botón haga clic en, o después de una llamada AJAX. Usted puede tener algunos casos en los que AngularJS no llama a la función digest digest() por usted. En ese caso tienes que llámalo tú mismo.

$aplicar() -

Angular do actualiza automáticamente por arte de magia solo los cambios del modelo que son dentro del contexto AngularJS. Cuando se cambia en cualquier modelo fuera de el contexto Angular (como los eventos DOM del navegador, setTimeout, XHR o third bibliotecas del partido), entonces usted necesita informar Angular de los cambios por llamando a apply apply() manualmente. Cuando finaliza la llamada a la función apply apply() AngularJS llama a digest digest() internamente, por lo que todos los enlaces de datos son actualizar.

Sucedió que necesitaba vincular un modelo de datos de una persona con un formulario, lo que hice fue un mapeo directo de los datos con el formulario.

Por ejemplo, si el modelo tuviera algo como:

$scope.model.people.name

La entrada de control del formulario:

<input type="text" name="namePeople" model="model.people.name">

De esta manera, si modifica el valor del controlador de objetos, esto se reflejará automáticamente en la vista.

Un ejemplo en el que pasé el modelo se actualiza a partir de los datos del servidor es cuando se pide un código postal y código postal basado en written carga una lista de colonias y ciudades asociadas a esa vista, y por defecto establece el primer valor con el usuario. Y esto funcionó muy bien, lo que sucede, es que angularJS a veces toma unos segundos para actualizar el modelo, para hacer esto se puede poner un spinner mientras se muestran los datos.

Enlace de Datos:

¿Qué es el enlace de datos?

Cada vez que el usuario cambia los datos en la vista , se produce una actualización de ese cambio en el modelo de ámbito, y viceversa.

¿Cómo es posible?

Respuesta Corta : Con la ayuda de digest cycle.

Descripción: Angular js establece el vigilante en el modelo scope, que activa la función listener si hay un cambio en el modelo.

$scope.$watch('modelVar' , function(newValue,oldValue){

//Código de actualización Dom con nuevo valor

});

Entonces, ¿Cuándo y Cómo se llama a la función watcher?

La función Watcher se llama como parte del ciclo digest.

Digest cycle se llama activado automáticamente como parte de las directivas/servicios integrados de angular js como ng-model , ng-bind, tim timeout, ng-click y otros.. eso te permite activar el ciclo de resumen.

Ciclo del compendio función:

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

Es decir $rootScope.$apply()

Nota: apply apply () es igual a ro rootScope.digest digest () esto significa que la comprobación sucia comienza desde la raíz o la parte superior o desde el ámbito padre hasta todos los ámbitos secundarios de la aplicación angular js.

Las características anteriores funcionan en los navegadores IE para las versiones mencionadas también simplemente asegurándose de que su aplicación sea la aplicación angular js, lo que significa que está utilizando el archivo de script de marco angularjs al que se hace referencia en el script etiqueta.

Gracias.

1. El enlace de datos unidireccional es un enfoque en el que se toma un valor del modelo de datos y se inserta en un elemento HTML. No hay forma de actualizar el modelo desde la vista. Se utiliza en sistemas clásicos de plantillas. Estos sistemas enlazan datos en una sola dirección.

2. El enlace de datos en Angular apps es la sincronización automática de datos entre el modelo y los componentes de la vista.

El enlace de datos le permite tratar el modelo como la única fuente de verdad en su aplicación. La vista es una proyección del modelo en todo momento. Si se cambia el modelo, la vista refleja el cambio y viceversa.

Aquí hay un ejemplo de enlace de datos con AngularJS, usando un campo de entrada. Lo explicaré más tarde

Código HTML

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

Código AngularJS

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

Como puede ver en el ejemplo anterior, AngularJS usa ng-model para escuchar y observar lo que sucede en los elementos HTML, especialmente en los campos input. Cuando pasa algo, haz algo. En nuestro caso, ng-model se une a nuestra visión, usando la notación del bigote {{}}. Lo que se escribe dentro del campo de entrada se muestra en la pantalla al instante. Y esa es la belleza del enlace de datos, usando AngularJS en su forma más simple.

Espero que esto ayude.

Vea un ejemplo de trabajo aquí en Codepen

AngularJS soporta Enlace de datos bidireccional.
Significa que puede acceder a los datos Vista - > Controlador & Controller - > View

Para Ex.

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O / P

Peter

Usted puede enlazar datos en ng-model Como:-
2)

<input ng-model="name" />

<div> {{ name }} </div>

Aquí en el ejemplo anterior, cualquier entrada que el usuario dé, será visible en la etiqueta <div>.

Si desea enlazar la entrada desde html a contralor:-
3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

Aquí si quieres usar input name en el controlador entonces,

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng-model enlaza nuestra visión y la traduce en expresión {{ }}.
ng-model son los datos que se muestran al usuario en la vista y con los que el usuario interactúa.
Por lo tanto, es fácil vincular datos en AngularJS.

Angular.js crea un vigilante para cada modelo que creamos a la vista. Cada vez que se cambia un modelo, una clase" ng-dirty "se anexa al modelo, por lo que el observador observará todos los modelos que tienen la clase" ng-dirty " y actualizará sus valores en el controlador y viceversa.