Descripción general
El compilador HTML de AngularJS permite que el navegador reconozca una nueva sintaxis HTML. Le permite asociar comportamientos a elementos o atributos HTML, e incluso le permite crear nuevos elementos con comportamientos personalizados. AngularJS llama a este comportamiento extendido a "instrucciones"
HTML tiene muchas estructuras declarativas para controlar el formato al escribir páginas estáticas. Por ejemplo, si desea centrar un contenido, no tiene que decirle al navegador que "encuentre el punto medio de la ventana y lo combine con la mitad del contenido". Solo necesita agregar un atributo Align = "Center" al elemento que debe centrarse. Este es el poder del lenguaje declarativo.
Pero los idiomas declarativos también tienen algo que no se puede lograr, y una de las razones es que no puede usarlo para permitir que los navegadores reconozcan una nueva sintaxis. Por ejemplo, si no centra el contenido, pero a 1/3 de la izquierda, no podrá hacerlo. Por lo tanto, necesitamos una forma de habilitar el navegador para aprender una nueva sintaxis HTML.
Los estudiantes de AngularJS provienen de algunas instrucciones que son muy útiles para crear aplicaciones. También esperamos que pueda crear algunas instrucciones que sean útiles para sus propias aplicaciones. Estas instrucciones extendidas son el "lenguaje específico del dominio" que crea la aplicación.
El proceso de compilación ocurrirá en el lado del navegador; El lado del servidor no participará en ningún paso, ni será precompilado.
Cumplimiento
El compilador es un servicio proporcionado por AngularJS. Busca propiedades relacionadas con ella atravesando el DOM. Todo el proceso de compilación se divide en dos etapas.
1. Compilación: atraviese el DOM y recopile todas las instrucciones relevantes para generar una función de enlace.
2. Enlace: une un alcance a la directiva y genere una vista dinámica. Cualquier cambio en el modelo de alcance se reflejará en la vista, y cualquier acción del usuario en la vista se reflejará en el modelo de alcance. Esto hace que el modelo de alcance sea lo único que debe preocuparse en la lógica de su negocio.
Hay algunas instrucciones, como Ng-Repeat, que clona cada elemento DOM en el conjunto de datos una vez. La práctica de dividir todo el proceso de compilación en dos etapas: la compilación y la vinculación mejora el rendimiento general, porque la plantilla clonada solo necesita ser compilada una vez en total, y luego vinculada a sus respectivas instancias modelo.
instrucción
La directiva indica "la acción que debe realizarse cuando la estructura HTML asociada ingresa a la fase de compilación". Las directivas se pueden escribir en nombre del elemento, en el atributo, en el nombre de la clase CSS y en los comentarios. A continuación se presentan varios ejemplos de uso de la directiva de unión a NG con la misma función.
La copia del código es la siguiente:
<span ng-bind = "exp"> </span>
<span> </span>
<ng-kind> </ng-kind>
<!-Directiva: NG-Bind Exp->
Las directivas son esencialmente solo funciones que deben ejecutarse cuando el compilador se compila al DOM relevante. Puede encontrar información más detallada sobre las directivas en la documentación de la API de la Directiva.
A continuación se muestra un comando que hace que los elementos sean arrastrables. Tenga en cuenta el atributo arrastrable en el elemento <span>.
index.html:
La copia del código es la siguiente:
<! Doctype html>
<html ng-app = "drag">
<Evista>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</ablo>
<Body>
<span draggable> drag me </span>
</body>
</html>
script.js:
La copia del código es la siguiente:
angular.module ('arrastre', []).
directive ('draggable', function ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
Función de retorno (alcance, elemento, attr) {
element.css ({
Posición: 'relativo',
borde: '1px sólido rojo',
backgroundcolor: 'lightgrey',
cursor: 'puntero'
});
element.bind ('Mousedown', function (evento) {
startx = event.screenx - x;
starty = event.screeny - y;
$ document.bind ('mouseMove', mouseMove);
$ document.bind ('mouseup', mouseup);
});
function mouseMove (evento) {
y = Event.Screeny - Starty;
x = event.screenx - startx;
element.css ({
arriba: y + 'px',
Izquierda: X + 'PX'
});
}
function mouseup () {
$ document.unbind ('mouseMove', mouseMove);
$ document.unbind ('mouseup', mouseup);
}
}
});
Este nuevo comportamiento se puede lograr agregando el atributo arrastrable. La belleza de nuestra mejora es que le damos al navegador nuevas capacidades. Hemos utilizado una forma natural de expandir la capacidad del navegador para comprender nuevos comportamientos y nuevas sintaxis siempre que el desarrollador esté familiarizado con las reglas HTML.
Comprender la vista
Hay muchos sistemas de plantillas en línea. La mayoría de ellos "vinculan las plantillas y datos de caracteres estáticos, generan nuevos caracteres e insertan en elementos de página a través de InnerHTML".
Esto significa que cualquier cambio en los datos hará que los datos se recombinen con la plantilla para generar nuevos caracteres y luego insertarse en el DOM. Los problemas que surgen incluyen: la entrada del usuario debe leerse y combinarse con los datos del modelo, la entrada del usuario debe sobrescribirse, todo el proceso de actualización debe administrarse manualmente y la falta de expresiones ricas.
AngularJS es diferente. El compilador AngularJS usa DOM con instrucciones, en lugar de plantillas de cadena. Devuelve una función de enlace, que se combina con el modelo de alcance para generar una vista dinámica. El proceso de enlace de esta vista y el modelo es "transparente". El desarrollador no necesita hacer nada sobre la actualización de la vista. Y la aplicación no usa InnerHTML, por lo que no tenemos que sobrescribir la entrada del usuario. Más particularmente, las directivas de Angular no solo pueden usar la unión de cadenas, sino que también usar algunas estructuras que indican el comportamiento.
La compilación AngularJS generará un "DOM estable". Esto significa que las instancias de elementos DOM unidos al modelo de datos no cambiarán durante el ciclo de vida del enlace. Esto también significa que el código puede obtener referencias de instancias de elementos DOM y eventos de registro, sin preocuparse de que esta referencia se pierda cuando se combinen la plantilla y los datos.