El texto original continúa y el libro continúa durando. . . Todavía consulte http://code.angularjs.org/1.0.2/docs/guide/compiler
1. Resumen
El compilador HTML de Angular permite a los desarrolladores personalizar la nueva sintaxis HTML. El compilador nos permite adjuntar el comportamiento a cualquier elemento o atributo HTML, o incluso nuevas etiquetas HTML, atributos (como <beautiful = "cf"> </teautiful>). Angular llama a estas directivas de comportamientos adicionales.
HTML tiene muchas estructuras de estilo HTML predefinidas que formatan específicamente documentos estáticos (que pueden decirle al navegador cómo mostrar el contenido etiquetado). Supongamos que algo debe centrarse, y no necesitamos enseñarle al navegador cómo hacerlo (n palabras omitidas aquí). Simplemente necesitamos agregar Align = "Center" a las etiquetas que deben centrarse. Esto es lo mejor del lenguaje declarativo.
Pero los idiomas declarativos también tienen sus limitaciones, es decir, no puede decirle al navegador cómo manejar la sintaxis fuera del alcance predefinido. Por ejemplo, no podemos decirle al navegador muy simplemente cómo alinear el texto 1/3 del navegador. Por lo tanto, necesitamos una forma de mantener el navegador en movimiento con los tiempos y aprender nuevas gramáticas.
Angular pre-Binds Algunas directivas que son útiles en la construcción de aplicaciones. También podemos crear directivas únicas para nuestras propias aplicaciones. Estas extensiones directivas se convertirán en el "lenguaje específico del dominio" de nuestras propias aplicaciones.
Estas compilaciones solo ocurrirán en el lado del navegador y no requieren pasos del lado del servidor o precompilación.
2. Compilador
Como servicio angular, el compilador es responsable de atravesar la estructura DOM y encontrar propiedades. El proceso de compilación se divide en dos etapas:
1. Compilar: atravesar el árbol de nodo DOM y recolectar todas las directivas. El resultado es una función de enlace.
2. Enlace: vincule las directivas en un alcance y cree una vista en vivo. Cualquier cambio en el alcance se reflejará en la vista (actualice la vista); La actividad de cualquier usuario (cambio) a la plantilla se reflejará en el modelo de alcance (enlace de dos vías). Esto permite que el modelo de alcance refleje el valor correcto.
Algunas directivas, como Ng-Repeat, copian un elemento específico (combinación) una vez para cada elemento de la colección. La compilación y el enlace son dos etapas para mejorar el rendimiento. Porque la plantilla clonada solo necesita ser compilada una vez, y luego vincule los elementos en cada colección una vez (similar al caché de plantilla).
3. Directiva
La directiva es un comportamiento que se activa cuando se encuentra una estructura HTML específica durante la compilación. Las directivas se pueden colocar en el nombre, atributo, clase e incluso comentarios de elementos. Aquí hay algunas formas de hacer referencia a NG-Bind (una directiva incorporada):
<span ng-bind = "exp"> </span> <span> </span> <ng-kind> </ng-kind> <!-Directiva: ng-bind exp->
La directiva es solo una función que se ejecuta cuando el compilador lo encuentra en el DOM. La documentación de la API directiva explica en detalle cómo crear una directiva.
Aquí hay una muestra que permite que un elemento juegue escondido con el mouse ...
<! DocType html> <html lang = "zh-cn" ng-apx = "hiDeankseek"> <head> <meta charset = "utf-8"> <title> Hidden and Seek </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <span wildcat> me escapé tan pronto como toqué ~~ Come me ~~ </span> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> angular.module ("Hideankseek", []). ($ documento) {var maxleft = 400, maxtop = 300; "Position": "Absolute", "Border": "1px Solid Green"}); }). Text (msg [parseint (math.random () * 10000 % msg.length)]);Agregar el atributo "Wildcat" a cualquier elemento hará que el elemento tenga un nuevo comportamiento. De esta manera, enseñamos al navegador cómo lidiar con elementos que se esconderán y buscarán (no se preocupe, no está en una habitación determinada, no colgará -_-!). Hemos ampliado el "vocabulario" del navegador a través de este enfoque. Esta es una forma relativamente natural para cualquiera que esté familiarizado con las reglas HTML.
Ya es tarde en la noche, y continuaremos mañana. . . Nos vemos después del anuncio
======================= Hermosa línea dividida ===============================
4. Comprenda la vista (Vista)
Hay muchos sistemas de plantilla afuera, que generalmente se conectan a datos a través de cadenas de plantilla, generan la cadena HTML final y escriben el resultado en un elemento a través del atributo InnerHTML.
Esto significa que cuando cualquier datos cambia, los datos y las plantillas deben fusionarse nuevamente en cadenas, y luego volver a escribir al elemento correspondiente como InnerHTML. Aquí hay algunos problemas: (Realmente no puedo entender la traducción literal aquí ... solo sí) Supongamos que existe una escena, y la plantilla contiene el cuadro de entrada. El usuario ingresa al cuadro de entrada y la plantilla se actualiza sincrónicamente. Las plantillas normales actualizan las vistas a través de InnerHTML, cadenas y conexiones de datos, que interrumpirán la entrada del usuario y tendrán una mala experiencia.
Angular es único. El compilador angular (compilador) procesa DOM a través de directivas, no procesando plantillas de cadena. El resultado de procesamiento es una función de enlace que se combina con el modelo de alcance y genera una plantilla en tiempo real. La unión de la vista al modelo de alcance es transparente para nosotros. Los desarrolladores no necesitan hacer ninguna acción para actualizar vistas o modelos. Además, dado que la plantilla de vista no se actualiza con InnerHTML, la entrada del usuario no se interrumpirá. Además, las directivas angulares no solo pueden unir los valores de texto, sino también ser construcciones de comportamiento.
Este método de procesamiento de Angular produce un DOM estable. Esto significa que durante el ciclo de vida del elemento DOM, siempre está vinculado a una instancia de un determinado modelo, y esta relación no cambiará. Esto también significa que el código puede mantener una referencia a un objeto DOM, registrar las funciones del evento y que esta referencia no será destruida por la fusión de datos de plantilla.