De hecho, no sé quién debería ser blanco o dónde comenzar a escribir, por lo que comenzaré a escribir de acuerdo con una idea simple.
1.angular. Elemento
2.angular. Bootstrap
Estamos muy claro que NG-APP se aplica a los nodos, y Angular automáticamente lo ayuda a inicializarse. El proceso de inicialización se divide en los siguientes pasos
1.angular se inicializará automáticamente cuando se cargue el documento, y primero, se encontrará el nodo especificado por la Directiva NG-APP.
2. Carga de instrucciones relacionadas con el módulo
3. Cree un inyector relacionado con la aplicación (Dependence Manager)
4. Comience a compilar DOM con el NG-APP establecido como el nodo raíz
Ahora lo inicializamos nosotros mismos y hacemos algo equivalente a la Directiva NG-APP. Angular.Element Este es el envoltorio, envolviendo el elemento DOM original o la cadena HTML como elemento jQuery. Angular.bootstrap puede inicializar manualmente el script, usamos estos dos para inicializar este script
La copia del código es la siguiente:
<! Doctype html>
<html lang = "zh-cn">
<Evista>
<meta charset = "utf-8">
<title> bootstrap-manual </title>
<style type = "text/css">
.ng-cloak {
Pantalla: ninguno;
}
</style>
</ablo>
<Body>
Aquí está el exterior de Ng-app ~~ {{1+2}}
<div id = "widuu"> Esto está en ng-app ~~~ {{1+2}} </div>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javaScript">
angular.element (documento) .Ready (function () {
angular.bootstrap (angular.element (document.getElementById ("widuu")));
});
</script>
</body>
</html>
2.Compilador
Vemos claramente que el documento oficial de AngularJS está lleno de nomenclatura de camello, como NgApp, Ngmodule, Ngbind, etc., son instrucciones relacionadas. Entre ellos, el compilador HTML nos permite definir atributos y etiquetas de elementos por nosotros mismos. Angular llama a estas directivas de comportamientos adicionales.
La documentación oficial explica el compilador como este
La copia del código es la siguiente:
Compilador
El compilador es un servicio angular que atraviesa el DOM en busca de atributos. El proceso de compilación ocurre en dos fases.
Compilar: atravesar el DOM y recolectar todas las directivas. El resultado es una función de enlace.
Enlace: combine las directivas con un alcance y produzca una vista en vivo. Cualquier cambio en el modelo de alcance se refleja en la vista, y cualquier interacción del usuario con la vista se refleja en el modelo de alcance. Esto hace que el modelo de alcance sea la única fuente de verdad.
Algunas directivas, como los elementos DOM de clonas Ng-Repeat, una vez para cada elemento en una colección. Tener una fase de compilación y enlace mejora el rendimiento, ya que la plantilla clonada solo necesita ser compilada una vez, y luego vinculada una vez para cada instancia de clon.
El compilador es un servicio angular, responsable de atravesar nodos DOM y encontrar propiedades. La compilación se divide en dos etapas:
1. Compilación: atraviese los nodos y recolecte todas las directivas, devuelva 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. Cree su propia directiva paso a paso
1. Comprender la directiva
En primer lugar, entendemos que la Directiva se basa en la nomenclatura de Camel, como Ngmodule. Al compilar, el partido es así, por ejemplo:
La copia del código es la siguiente:
<input ng-model = "foo">
<Entrada data-ng: model = "foo">
La directiva puede usar X- o Data- como prefijo, y puede usar el delimitador :,-, o _ etc. para convertir los métodos de nombres de camellos, de la siguiente manera:
La copia del código es la siguiente:
<span ng-bind = "name"> </span> <br/>
<span ng: bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
En general, usamos Ng-unk para corresponder a Ngbind, este formato
$ compilar puede coincidir con la directiva basada en el nombre del elemento, el atributo, el nombre de la clase y el comentario
La copia del código es la siguiente:
<My-dir> </dir>
<span my-dir = "exp"> </span>
<!-Directiva: My-Dir Exp->
<span> </span>
Durante el proceso de compilación, el compilador coincide con el texto con expresiones integradas en atributos (como {{algo}}) a través del servicio $ interpolato. Estas expresiones se registrarán como relojes y se actualizarán juntas como parte del ciclo Digest. Aquí hay una simple interpolación:
<img src = "img/{{username}}. jpg"/> hola {{nombre de usuario}}!
2. Pasos de compilación
Tres pasos para "compilar" HTML:
1. Primero, convierta HTML en objetos DOM a través de la API estándar del navegador. Este es un paso muy importante. Porque la plantilla debe ser parsable (cumpliendo con las especificaciones). Esto se puede comparar con la mayoría de los sistemas de plantilla, que generalmente se basan en cadenas, no en elementos DOM.
2. La compilación del DOM se realiza llamando al método $ comple (). Este método atraviesa el DOM y coincide con la Directiva. Si la coincidencia es exitosa, se agregará a la lista de directivas junto con el DOM correspondiente. Mientras se identifiquen todas las directivas asociadas con el DOM especificado, se clasificarán en prioridad y ejecutarán su función compilar () en ese orden. La función de compilación de directivas tiene la oportunidad de modificar la estructura DOM y es responsable de generar el análisis de la función Link (). El método $ compile () devuelve una función de enlace combinada, que es una colección de funciones vinculadas devueltas por la función de compilación de la directiva misma.
3. Conecte la plantilla al alcance a través de la función de enlace devuelta en el paso anterior. Esto a su vez llama a la función de vinculación de la Directiva, lo que les permite registrar a algunos oyentes en el elemento y crear algunos relojes con alcance. El resultado en esto es una unión instantánea bidireccional entre el alcance y el DOM. Cuando cambia el alcance, el DOM obtendrá la respuesta correspondiente.
La copia del código es la siguiente:
var $ compile = ...; // inyectado en su código
Var alcance = ...;
var html = '<div ng-bind =' exp '> </div>';
// Paso 1: analizar html en el elemento DOM
plantilla var = angular.element (html);
// Paso 2: compilar la plantilla
var linkfn = $ compile (plantilla);
// Paso 3: Enlace la plantilla compilada con el alcance.
linkfn (alcance);
Atención de atributos NGATTR
La copia del código es la siguiente:
<svg>
<circle ng-attr-cx = "{{cx}}"> </círculo>
</svg>
Eso es todo hoy, y comience a escribir para crear una directiva mañana ~~~ La longitud de control no debería ser demasiado larga, hay muchos conceptos principales en este capítulo ~~~