En la sección anterior, el marco Angular JS se introduce brevemente. En esta sección, se continuarán los mecanismos Bootstrap (Bootstrap) y compilador (compilación) de Angular.
1: Bootstrap: inicialización angular
1: La automatización inicial recomendada por Angular es la siguiente:
<! Doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html
Use NGAPP para marcar el nodo raíz donde necesita iniciar automáticamente la aplicación, que generalmente es una etiqueta HTML. Cuando el evento DomContentLoaded desencadena angular, encontrará automáticamente el NGAPP como el nodo raíz de la aplicación. Si se encuentra, se realizarán las siguientes operaciones:
1. Directiva relacionada con el módulo de carga (módulo) (instrucciones).
2. Cree un inyector de aplicación (mecanismo de inyección de Angular).
3. Compilar y procesar NG-APP como instrucciones del nodo raíz. Esto le permite personalizar la selección del nodo DOM como nodo raíz de aplicación.
<! DocType html> <html ng-app = "opcionalModuleName"> <body> puedo agregar: {{ +}}. <script src = "angular.js"> </script> </body> </html>2: Inicialización manual:
Si desea tener más control sobre la inicialización, puede usar un método de arranque manual personalizado para inicializar en lugar de la inicialización automática de Angular. Por ejemplo, debe hacer algo antes de compilar angular la plantilla, como cambiar ciertos contenidos de la plantilla. El método de arranque manual será el siguiente:
< {angular.bootstrap (documento);}); </script> </body> </html>1. Después de cargar todo el código de la página, busque el nodo raíz de plantilla HTML (elemento de documento típico).
2. Llame a api/angular.bootstrap (angular.bootstrap (elemento [, módulos])) para compilar la plantilla para que sea ejecutable.
Dos: Compilador: Traducción de Angular
El mecanismo de compilación de Angular permite a los desarrolladores agregar nueva sintaxis HTML al navegador, lo que nos permite agregar algunos nodos HTML, atributos e incluso crear algunos nodos personalizados, atributos. Angular expande estos comportamientos en directivas. Angular trae directivas útiles y nos permite crear directivas específicas de dominio.
1: El procesamiento del compilador se divide en dos pasos:
1. Convertir DOM, Collect Directive y return Link (Connection) Función.
2. Fusionar las instrucciones y el alcance para generar una vista viva. Cualquier cambio en el modo de alcance se reflejará en la vista y las interacciones del usuario de la vista también se sincronizarán con el modelo de alcance, y el alcance es una sola fuente de datos.
2: comando directivo
La directiva es un acto que se procesará mediante edición especial de diseño HTML. Se puede colocar en los nombres, atributos, clase del nodo o incluso en el comentario HTML. Aquí está el método de escritura equivalente del propio enlace NG de Angular:
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-Directiva: NG-Bind Exp>
La directiva es solo una función que será ejecutada por Angular en el DOM. Aquí hay un ejemplo de arrastre y gotas que se pueden aplicar al atributo de SPAN y DIV:
angular.module ('drag', []). Directiva ('Draggable', function ($ document) {var startx =, starty =, x =, y =; return function (scope, element, attr) {element.css ({posicion: 'relative', border: 'px sólido rojo', fondo de fondo: 'lightgrey', cursor: 'Pointer'}); Element.bind (',' mouseDownwown ',' mouseDown ',', mouseDownt ',', mouseDownt ',', mouseDown ',', mouseDown ',', mouseDown ',', mouseDownt ',' mouseDOWNY ',', MOUSEDOWN Función (Evento) {startx = event.screenx - x; 'PX', izquierda: x + 'Px'});Manifestación
¡Puedes arrastrarme y moverme a cualquier parte!
3: Ver comprensión
Muchos motores de plantilla están diseñados para fusionar plantillas y modelos para devolver una cadena, y luego agregar al nodo DOM utilizando InnerHTML, lo que se cree que cualquier cambio en los datos debe volver a fusionarse para generar un nuevo contenido y agregar al DOM. La siguiente figura pertenece a la tecnología de enlace unidireccional:
Angular no utiliza instrucciones de directiva en lugar de cadenas. El valor de retorno es una función de enlace que combina el modelo de datos. La unión de la vista y el modelo es automático y transparente, y no requiere que los desarrolladores agregen acciones adicionales para actualizar la vista. Angular no es solo una vinculación del modelo de datos, sino también un concepto de comportamiento. Como un enlace bidireccional, la forma es la siguiente:
material:
1.Ingular Sitio web oficial: http://angularjs.org/
2. Descarga del código: https://github.com/angular/angular.js
Lo anterior es el Angular Bootstrap y los mecanismos del compilador introducidos por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!