1. Etapa inicial
Todos deben saber que cuando el navegador carga una página HTML, primero analizará la página HMTL en un árbol DOM, y luego cargará cada nodo de elemento en el árbol DOM uno por uno. Podemos tratar a AngularJS como una biblioteca JS similar a jQuery. Lo presentamos en HTML a través de la etiqueta <Script>. En este momento, Angular será un nodo DOM ordinario que espera que el navegador se analice. Cuando el navegador analiza este nodo y descubre que es un archivo JS, el navegador dejará de analizar los nodos DOM restantes y comenzará a ejecutar este JS (es decir, angular.js). Al mismo tiempo, Angular establecerá un oyente de eventos para escuchar el evento DomContentLeared del navegador. Cuando Angular escuche este evento, se iniciará la aplicación angular.
2. Etapa de inicialización
Después de que Angular comienza, busca la directiva NG-APP, luego inicializa una serie de componentes necesarios (es decir, $ inyector, $ compilar $ y $ Rootscope), y luego comienza a analizar el árbol DOM nuevamente.
3. Compilar y enlace
El servicio $ compilar encuentra elementos DOM con instrucciones declaradas al atravesar el árbol DOM. Al encontrar un elemento DOM con una o más instrucciones, clasifica las instrucciones (según la prioridad de la instrucción) y luego usa el servicio $ inyector para buscar y recopilar la función de compilación de las instrucciones y ejecutarla.
Después de ejecutar el método de compilación de cada nodo, el servicio $ compilar llamará a la función de enlace. Esta función de enlace establece el monitoreo de instrucciones que están vinculadas a un alcance cerrado. Este comportamiento crea una vista en vivo.
Finalmente, después de completar el servicio de compilación $, el tiempo de ejecución de AngularJS está listo.
4. Etapa de operación
Angular proporciona su propio bucle de eventos. La instrucción en sí registra el oyente del evento, por lo que cuando se activa el evento, la función de instrucción se ejecutará en el bucle $ Digest de AngularJS. El $ Digest Loop esperará la lista de expresiones de $ Watch. Cuando se detectan los cambios del modelo, se llamará a la función $ reloj, y luego la lista de vigilancia $ se ve nuevamente para garantizar que no se haya cambiado ningún modelo.
Una vez que el bucle $ Digest se estabiliza y no se detectan cambios potenciales, el proceso de ejecución deja el contexto angular y generalmente regresa al navegador, y el DOM se presentará aquí.
Dibuje los pasos clave del proceso anterior en un gráfico, de la siguiente manera:
Lo anterior es una introducción detallada al proceso de ejecución de AngularJS. Continuaremos organizando información relevante en el futuro. Gracias por su apoyo a este sitio web.