Dirección original: http://code.angularjs.org/1.0.2/docs/guide/concepts
continuar. .
1. Resumen
Este artículo proporciona principalmente una visión general de los componentes angulares y explica cómo funcionan. La lista es la siguiente:
2. Startup
Así es como se inicia Angular (vea el gráfico con el siguiente ejemplo):
1. El navegador carga HTML y convierte las etiquetas HTML en objetos DOM;
2. El navegador carga el script de angular.js;
3. Angular espera el evento DomContentLoaded;
4. Looks angulares para NG-APP, una directiva utilizada para especificar el rango de límite de la aplicación;
5. Si NG-APP tiene un módulo especificado (quizás NG-APP = "SomApp"), se utilizará como Configuración $ inyector;
6. $ inyector se utiliza para crear $ compilar el servicio (servicio) y $ rootscope;
7. El servicio de compilación $ se usa como una "compilación" (algo así como transversal, luego hacer algo misterioso) Dom y conectarlo a la correspondiente $ Rootscope.
8. Ng-Init Esta directiva crea un atributo de nombre en el alcance correspondiente y le asigna un valor "gatito";
9. Inserte el valor de "{{name}}" en la expresión y finalmente muestre "¡Hello Kitty!".
<! DocType html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </title> <style type = "text/css"> .ng-cloak {visualización: ninguno; } </style> </head> <body> <div ng -init = "name = 'kitty'"> hello {{name}}! </div> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> </body> </html>El progreso fue lento porque discutí algo con alguien esta noche. . . Esa es la oración de nuevo. . . Ahora es tarde por la noche. . . Angular, ¡nos vemos después del anuncio!
=================================================================
El anuncio está terminado. . . continuar
3. Tiempo de ejecución
Este cuadro y el siguiente ejemplo describen cómo Angular interactúa a través del bucle de eventos del navegador (las funciones de procesamiento de tiempo, así como las funciones ejecutadas por el temporizador, se organizarán en una estructura de cola, y utilizarán un bucle infinito para extraer continuamente las funciones de la cola para ejecutar. Esto es eventual. http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop).
1. El bucle del evento del navegador espera a que llegue el evento. Los eventos provienen de la interacción del usuario (eventos DOM), eventos de temporizador (setTimeout), eventos de red (respuesta del servidor, XHR, etc.);
2. La función de devolución de llamada para eventos comienza a ejecutarse. Aquí entramos en el contexto de JavaScript (contexto). Esta función de devolución de llamada puede modificar la estructura DOM.
3. Cuando se ejecuta la función de devolución de llamada, el navegador sale del contexto de JavaScript y vuelve a dibujar la vista de acuerdo con los cambios DOM.
Angular modifica el flujo general de JavaScript creando su propio bucle de procesamiento de eventos. Esto divide JavaScript en contextos de ejecución tradicionales y angulares. Cualquier operación realizada en el contexto de ejecución angular tiene unión de datos angular, manejo de excepciones, observación de propiedades y otras habilidades. Podemos ingresar el contexto de ejecución angular usando $ Aplication () en JavaScript. Pero recuerde que en la mayoría de los lugares (angulares) (como controladores, servicios), la directiva que maneja los eventos llamará a $ solicitarle. El escenario en el que se llama Manualmente $ Aplicación, generalmente es cuando implementa un controlador de eventos personalizado o maneja las devoluciones de llamada de las bibliotecas de terceros.
1. Ingrese el contexto de ejecución angular llamando al alcance. $ Aplicar (estímulo). StimulusFn es una función (incluido el alcance como argumento) o una expresión legal angular que queremos ejecutar en el contexto de ejecución angular.
2. Angular ejecuta estímulo, que generalmente cambia el estado de aplicación.
3. Angular entra en el bucle $ Digest. Este bucle consta de dos bucles más pequeños que manejan $ Evalasync Queue y $ Watch List. El bucle $ Digest se mantendrá iterando antes de que el modelo sea estable, es decir, la cola $ Evalasync está vacía y la lista de vigilancia $ no detecta cambios.
4. $ Evalasync Queue se usa como un medio para organizar que el marco de la pila actual se debe saltar del marco de pila actual (el marco de la pila se refiere al área (o espacio) asignada a la función de ejecución actualmente en la pila. El parámetros aprobados, la dirección de retorno (que debe ser redirigida a la función de la función. Las variables almacenadas en la pila) están todas en el marco de la pila. Esto generalmente se logra mediante el uso de SetTimout (0). Pero el método SetTimeout (0) causará lentitud, o cuando el navegador dibuja la vista después de procesar cada evento, la vista flasheará (¿Angular está resolviendo este problema? ¿Cómo resolverlo?).
5. La lista de vigilancia $ es una colección de expresiones que pueden modificarse en la última iteración. Si (modelo) cambia, se llamará a la función $ reloj para lograr el objetivo de reasignar un DOM específico.
6. Una vez que se completa el bucle Angular $ Digest (la situación mencionada en los 3 anteriores), después de dejar el contexto Angular y JavaScript, el navegador volverá a pintar el DOM en respuesta a los cambios.
A continuación se explica cómo el ejemplo "Hello Kitty" (-_-!) Implementa el efecto de unión a datos cuando el usuario ingresa texto en el cuadro de texto.
1. Fase de compilación:
A) Se especifican los oyentes de eventos de Keydown de la directiva Ng-Model y Entrada en <Poning>.
b) {{name}} PLACEDER (Interpolation, no sé cómo traducir) (Expression) Establezca un reloj $ para responder cuando cambia el nombre.
2. Fase de tiempo de ejecución:
a) Presione el botón "X" en el control inutor para dejar que el navegador active un evento de tecla;
b) La directiva de entrada captura el cambio en el valor del cuadro de texto, y luego llama a $ aplicar ("name = 'x';"), actualizando el modelo aplicado en el contexto de ejecución angular.
c) Angluar aplica "Name = 'X';" al modelo. (El modelo ha cambiado)
d) $ Digest Loop Start
e) $ La lista de vigilancia detecta que el valor de nombre se ha cambiado, luego analiza la expresión {{name}} nuevamente y luego actualiza el DOM.
f) contexto de ejecución de salida angular (angular) y luego salga del evento Keydown y el contexto de ejecución de JavaScript a su vez;
g) El navegador vuelve a dibujar la vista y actualiza los caracteres.
<! DocType html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </title> <style type = "text/css"> .ng-cloak {visualización: ninguno; } </style> </head> <body> <input ng-model = "name"/> <p> hello {{name}}! </p> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> </body> </html>4. Alcance
El alcance es responsable de detectar cambios en el modelo y servir como el contexto de ejecución de la expresión. El alcance está anidado en una jerarquía similar a una estructura DOM (como aprendimos anteriormente, la división puede estar relacionada con el controlador). (Para más detalles, consulte la documentación de la Directiva individual para ver qué directiva creará un nuevo alcance)
El siguiente ejemplo muestra que el valor del "nombre" de expresión se determina en función del alcance del que depende (al que pertenece), y también incluye la forma de búsqueda de valor (similar a la cadena de alcance JS, si no lo tiene, busque mi padre).
<! DocType html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> alcance </title> <style type = "text/css"> .ng-cloak {visualización: ninguno; } </style> </head> <body> <div ng-concontroller = "controlera"> hola {{name}}!; </div> <div ng-concontroller = "controlerb"> hola {{name}}!; <div ng-confontroller = "ControlyerC"> Hola {{nombre}}!; <div ng-confontroller = "controlerd"> hola {{name}}!; </div> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> función controlera ($ scope) {$ scope.name = 'kitty'; } function ControllerB ($ Scope) {$ scope.name = 'lclao'; } function Controllerc ($ scope) {$ scope.name = 'jeffrey'; } function ControllerD ($ scope) {} </script> </body> </html>5. Controlador
<! DocType html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> controlador </title> <style type = "text/css"> .ng-cloak {visual } </style> </head> <body> <div ng-confontroller = "controlera"> hola {{name}}! <Botton ng-click = "doit ()"> doit !! </boton> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> function controlera ($ scope) {$ scope.name = 'kitty'; $ scope.doit = function () {$ scope.name = "Handsome"; }; } </script> </body> </html>El controlador es el código detrás de la vista (-_-!). Su responsabilidad es construir el modelo y empujarlo a la vista a través de la función de devolución de llamada. La vista es el alcance actual de la plantilla (HTML) mapa (traducido un poco apenas ...). El alcance es el enlace que dirige el modelo a la vista y envía el evento al controlador.
Es importante separar el controlador de la vista porque:
1.Controller está escrito en JavaScript. JavaScript es imprescindible. Un comando importante es una buena manera de describir el comportamiento de una aplicación. Los controladores no deben contener ninguna información de visualización (lógica) (referencias DOM o fragmentos HTML)
2. La plantilla de visión está escrita en HTML. HTML es declarativo. Declarativo (HTML) es una buena manera de describir una interfaz de usuario. Las vistas no deben contener ningún comportamiento.
3. Dado que el controlador no sabe a qué vista debe corresponder, un controlador puede (indirectamente) usar múltiples vistas. Esto es importante para volver a cuidar (¿reemplazar las pieles?), Otras vistas específicas del dispositivo (como teléfonos móviles y escritorios) y la medición del código.
6. Modelo
El modelo puede entenderse como un objeto de datos. Se usa como una combinación con la plantilla para producir vistas. Para escribir el modelo en la vista, el modelo debe ser referenciado por el alcance. A diferencia de muchos otros marcos, Angular no tiene restricciones ni requisitos en el modelo. No es necesario agregar una clase adicional, ni necesita acceder o cambiar el modelo a través de métodos especiales privilegiados. El tipo de datos del modelo puede ser un tipo primitivo (cadena, número ...), un objeto de valor clave ({a: 1, b: 2}) o una función (function () {...}). En pocas palabras, el modelo angular debe ser un objeto JavaScript normal.
7. Ver
La vista es algo que los usuarios pueden ver. La vista nació en la plantilla. Se combina con el modelo y eventualmente lo convierte en un navegador DOM. Angular toma una forma muy diferente de presentar la vista para muchos otros sistemas de plantillas.
Otros motores de plantilla: muchos motores de plantilla se implementan mediante la creación de cadenas HTML con etiquetas especiales. Por lo general, estas etiquetas de plantilla destruyen la sintaxis HTML, lo que significa que el código no se puede editar a través de un editor HTML general (esto es ...). La cadena de plantilla se pasa al motor de plantilla y se fusiona con los datos. Finalmente genera cadena HTML. Estas cadenas generalmente se escriben al DOM en .innerHtml, lo que lleva al navegador a representar el contenido de la plantilla. Este proceso debe repetirse una y otra vez cuando cambia los datos. La granularidad de la plantilla es consistente con la granularidad de la actualización DOM. La clave de este grano es que el sistema de plantilla procesa cadenas.
Angular: la diferencia entre las plantillas angulares es que está basado en DOM en lugar de ser basado en cuerdas. La plantilla aún necesita escribir algunas cadenas en el HTML, pero todavía es HTML (no incrustando la plantilla en el interior). El navegador convierte HTML en DOM, y luego DOM se convierte en la entrada del compilador (motor de plantilla de Angular). El compilador busca directivas y establece relojes en el modelo a su vez. El resultado es una vista que se ha actualizado todo el tiempo, y no hay necesidad de volver a coser el modelo y la plantilla. El modelo se convierte en la única fuente de verdad para la vista.
8. Directivas
La directiva es un comportamiento (por ejemplo, en el ejemplo del artículo anterior "ocultar y buscar") o conversión DOM (etiquetas personalizadas, que contienen un conjunto de DOM), y colocando su nombre en el atributo, el nombre de la etiqueta y el nombre de clase pueden activar la directiva. La directiva le permite extender las etiquetas HTML de manera declarativa.
Todavía hay algunas preguntas en los siguientes ejemplos. Así es como $ render disparadores @_ @
<! DocType html> <html lang = "zh-cn" ng-app = "myDirective"> <head> <meta charset = "utf-8"> <title> directiva </title> <style type = "text/css"> .ng-cloak {pantalla: Ninguno; } </ystye> </head> <cuerpo ng-concontroller = "myctrl"> <div ng-model = "content" contenteditable = "true"> my pequeño dada </div> <pre> modelValue = {{Content}} </ pre> <botte ng-Click = "Reset ()" RESET (Model de cambio) </botón> src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> angular.module ("myDirective", []) .Directive ("Contenteditable", function () {return {requerir: 'ngmodel', link: function (scope, element, attr, ngmodel) {ngmodel. $ setViewValue (element.text ()); setVal ();9. Filtros
Los filtros juegan un papel en la conversión de datos (formato). Por lo general, están relacionados con la región, y diferentes regiones pueden tener diferentes formatos de salida. Están siguiendo el espíritu de los filtros Unix con sintaxis similar: | (tubo)
<! DocType html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> filtro </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng -init = "list = ['Baidu B', 'Sogou S', '360', '3sb']"> Número Formateo: 1233211234567 -> {{1233211234567 | Número}}}} <br/> Filtros de la matriz y luego salida a través de JSON ng-model = "myFilterText" type = "text"/> <br/> {{list | filtre: myFilterText | json}}} <br/> </div> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> </fody> </html>10. Módulos y el inyector
El inyector es un localizador de servicios. Cada aplicación angular tendrá un inyector separado. El inyector proporciona una forma de encontrar instancias de objetos por nombre. El inyector mantendrá todas las instancias de objetos en el caché interno, por lo que cuando se llama repetidamente el mismo nombre, se devuelve la misma instancia de objeto. Si el objeto no existe, solicitará a la fábrica de instancias que cree una nueva instancia.
El módulo es un método para configurar una fábrica de instancias de un inyector, llamado "proveedor".
// Crear un módulo var mymodule = angular.module ('mymodule', []) // Configurar el inyector mymodule.factory ('servicea', function () {return {// en lugar de {}, coloque la creación de su objeto aquí};}); // Cree un inyector y configúrelo desde 'myModule' var $ injector = angular.injector ('mymodule'); // Recuperar un objeto del inyector por nombre var serviceA = $ injector.get ('serviceA'); // siempre es cierto debido a la instancia caché $ injector.get ('serviceA') === $ injector.get ('serviceA'); // verdaderoPero la verdadera x del inyector es que se puede usar para llamar a los métodos y "instanciar" el tipo. Esta maravillosa característica es que permite que los métodos y tipos soliciten los recursos de los que dependen, en lugar de buscarlos.
// escribes funciones como esta. Función Dosomething (ServiceA, ServiceB) {// Haz algo aquí. } // Angular proporciona el inyector para su aplicación var $ injector = ...; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Llame a la función Dosomething (ServiceA, ServiceB); // Lo anterior es el método antiguo tradicional ~ El siguiente es el método de hablar angular de su propia vaca X/////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////// La forma genial de obtener dependencias. // El $ inyector proporcionará los argumentos a la función automáticamente $ injector.invoke (dosomething); // Así es como el marco llama a sus funcionesTenga en cuenta que lo único que necesitamos escribir es nuestra función, ¡y podemos enumerar el recurso del que depende del método en los argumentos de la función! Cuando las llamadas angulares funcionan, usará el método "llamar" para llenar automáticamente los agrumentos de funciones.
Tenga en cuenta cómo se enumeran las dependencias en el constructor en el ejemplo a continuación. Cuando el controlador NG instancia el controlador, los recursos de dependencia se proporcionarán automáticamente. No es necesario crear, buscar o crear referencias de inyectores a los recursos de dependencia de carga.
<! DocType html> <html lang = "zh-cn" ng-app = "timeExample"> <head> <meta charset = "utf-8"> <title> inyector </title> <style type = "text/css"> .ng-cloak {pantalla: ninguno; } </style></head><body><div ng-controller="ClockCtrl"> Current time is : {{time.now}}</div><script src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript"> angular.module("timeExample", []). factory ("myClock", function ($ timeOut) {var time = {}; (function tick () {time.now = new Date (). ToString (); $ TimeOut (tick, 1000);}) (); Time de retorno;}); /** * * * @param $ scope * @param myclock ¡La dependencia myClock se inserta automáticamente aquí! ! * @Constructor */ function ClockCtrl ($ Scope, MyClock) {$ Scope.time = myClock; } </script> </body> </html>11. Espacio de nombres angular
Para evitar conflictos de nombre, Angular agregará el prefijo $ al nombre del objeto. No use $ prefijo en su código para evitar conflictos. (-_- !!)
Lo anterior es la información sobre los conceptos de AngularJS. Continuaremos agregando artículos relevantes en el futuro. ¡Gracias por su apoyo para este sitio!