1. Comenzar
Angular JS es un conjunto de marcos, plantillas, enlace de datos y componentes de UI ricos utilizados para desarrollar páginas web. Proporciona la arquitectura de las aplicaciones web sin operaciones manuales de DOM. AngularJS es muy pequeño, solo 60k, compatible con los navegadores convencionales, y funciona bien con jQuery.
2. Comprender los principios básicos
① Algunas introducciones a Angular
1. Conocimiento básico
1.Angular renunció IE8
2. Los cuatro puntos básicos son MVC, modularidad, sistema de instrucciones y enlace de datos de dos vías
2. Algunos principios
1. No reutilice el controlador. Un controlador generalmente solo es responsable de una pequeña pieza de vista.
2. No opere DOM en el controlador.
3. No formates los datos en Controllerller, Ng tiene buenos controles de formulario.
4. No realice operaciones de filtrado de datos en el controlador, hay un servicio de filtro $.
5. En términos generales, los controladores no se llamarán entre sí, y la interacción entre los controladores se llevará a cabo a través de eventos.
6.Angular usa instrucciones para reutilizar la vista.
7. $ El alcance es una estructura de árboles paralela a la etiqueta DOM.
8. El objeto de alcance de los niños heredará las propiedades y métodos en el alcance de $ parent.
9. Cada aplicación angular tiene solo un objeto $ Rootscope. (Generalmente ubicado en NG-App).
10. Puede usar Angular.Element ($ 0) .Scope () para depurar.
11. Use ngroute para enrutamiento entre vistas.
3. Las instrucciones angulares angulares más utilizadas y prácticas para las páginas HTML
①.ng-class (adecuado para situaciones en las que cambiará un determinado estilo como los gustos y la atención debido a una determinada operación)
La directiva de clase NG se usa para unir dinámicamente una o más clases de CSS a elementos HTML. El valor de la directiva de clase NG puede ser una cadena, un objeto o una matriz.
Si es una cadena, varios nombres de clase están separados por espacios.
Si es un objeto, debe usar un par de valores clave, que es un valor booleano, y el valor es el nombre de clase que desea agregar. La clase solo se agregará si la clave es verdadera.
Si es una matriz, puede estar compuesta de cadenas o combinaciones de objetos, y los elementos de la matriz pueden ser cadenas u objetos.
Dos formas recomendadas de usar:
1. En forma de cadena, el código es el siguiente:
<i ng-class = "{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'} [AccountInfo.Isfocus]" ng-click = 'wetherfocus ()'> </i>Esto significa que la etiqueta I tiene un icono de clase básica, clase Ng, que une una clase dinámica. El valor de esta clase se determina si el AccountInfo.ISfOcus es verdadero o falso. Si su valor es verdadero, la etiqueta i agregará la clase Ion-ios-Heart. Si su valor es falso, la etiqueta i agregará la línea ion-ios-heart-outline. Si su valor es falso, la etiqueta i agregará la línea ion-ios-heart-outline.
Esta categoría. La etiqueta I también une un evento Ng-Click. Además de manejar la lógica correspondiente, también se determina el valor de AccountInfo.ISfocus. De esta manera, cuando se produce una operación de clic, la clase correspondiente de la etiqueta I se cambiará naturalmente, y luego se mostrarán diferentes estilos.
2. El estilo de valor clave, el código es el siguiente:
<i ng-class = "{'ion-ios-heart': isios, 'ion-android-heart': isandroid}"> </i>Obviamente, del código, podemos ver que este significado es que cuando ISIOS es verdadero, se tomará la clase Ion-Ius-Heart, y cuando el valor de Isandroid es verdadero, se tomará la clase de ion-android-Heart.
②.ng-show y Ng-Hide (adecuado para al mostrar dos contenidos diferentes para diferentes situaciones)
La Directiva NG-Show muestra el elemento HTML especificado cuando la expresión es verdadera; de lo contrario, oculta el elemento HTML especificado.
La Directiva de Hide Ng oculta el elemento HTML especificado cuando la expresión es verdadera, de lo contrario se muestra el elemento HTML especificado.
Jaja, parece un hermano que es incompatible con el agua y el fuego. . . .
Los ejemplos son los siguientes:
<Div> <span ng-click = "togglemenu ()"> </span> </div> <div> <ul ng-show = "menustate"> ... </ul> <div ng-hide = "menustate"> ... </div>
Establezca un menustado variable booleano (en el desarrollo real, puede usar expresiones, ecuaciones de trilogía, etc.). Cuando sea cierto, se mostrará el contenido de Ng-Show y el contenido de Ng Hide se ocultará. De lo contrario, lo contrario es cierto. . .
③.ng-switch (adecuado para mostrar un contenido diferente en múltiples situaciones)
La Directiva Ng-Switch muestra o oculta la parte correspondiente de acuerdo con la expresión.
Los elementos infantiles correspondientes usan la directiva NG-Switch-When. Si se selecciona la coincidencia, seleccione la pantalla y se eliminan las otras.
Al configurar las opciones predeterminadas utilizando la Directiva NG-Switch-Default, las opciones predeterminadas se mostrarán si ninguna de ellas coincide.
ejemplo:
<div ng-switch = "ensayo de ensayo"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <div ng-switch-when = "1"> ... </div> <div ng-switch-when = "2"> ... </iv> <iv ng ng nwitch-defefault> ...
④.ng-model (principalmente hablaré sobre el pequeño pozo mágico del modelo ng)
La directiva del modelo NG une elementos de formulario HTML en la variable de alcance.
Si no hay una variable en el alcance, se creará. Ng-Model se usa comúnmente en <Poning>, <Select>, <ExteAea> y otros elementos.
El siguiente código:
<Div> <Textarea name = "my-Massage-Detail" ng-model = "content" placeholder = "Por favor, ingrese un mensaje"> </sextarea> <ang-kick = "submitmes ()"> Enviar </a> <br> </div>
Por definición, teóricamente hablando, cuando enviamos, está bien obtener directamente el valor del modelo NG definido en la página en el controlador. Pero de hecho, esto no es factible. Las pruebas personales encontraron que se emitió una salida indefinida, y si el valor inicial del modelo NG se define en el controlador, el valor inicial se obtiene en lugar del último valor después de cambiar.
Busqué información, lo que la significa más o menos. Angular limita algunas de nuestras definiciones. Solo podemos usar un objeto no práctico para pasar los parámetros.
¿Qué significa? Un pequeño cambio al ejemplo anterior, como sigue:
Código HTML:
<Div> <Textarea name = "My-Massage-Detail" Ng-Model = "Model.Content" PlaceHolder = "Por favor, ingrese un mensaje"> </extarea> <ang-kick = "SubtMes ()"> Enviar </a> </div>
Código del controlador:
$ scope.model = {}; $ scope.model.content = ''; $ scope.submitmes = function () {console.log ($ scope.model.content);}Es decir, definimos un objeto y luego definimos el modelo NG como una propiedad en este objeto para manejarlo. De esta manera, obtenemos el último valor de Ng-Model.
Otra manera simple es pasar el modelo NG como parámetro en él.
Los ejemplos son los siguientes:
// código html <input type = "text" ng-model = "código"> <botón ng-click = "setcode (código)"> Iniciar sesión </botón> <br> // código de controlador $ scope.setcode = function (code) {alert (código);}4. Habilidades prácticas para la interacción de datos
①use de promesa
ES6 define el objeto de promesa. Este objeto es muy útil, especialmente al interactuar con el fondo. No solo evita que las devoluciones de llamada sean demasiado profundas, sino que también se pueden manejar de manera uniforme para algunas situaciones, y también mejora la legibilidad del código. Tal servicio también está encapsulado en AngularJS, que es $ q.
$ Q existe como un servicio de AngularJS, y es solo una implementación simplificada del modo de programación asíncrono Promise. El objeto de diferir (objeto de retraso) se puede obtener a través de $ q.defer (). Hay tres métodos para este objeto:
Resolve (valor): envíe un mensaje al cuerpo de ejecución asíncrono del objeto prometedor y le dice que he completado con éxito la tarea, y el valor es el mensaje enviado.
rechazar (valor): envíe un mensaje al cuerpo de ejecución asincrónica del objeto de promesa y le dice que es imposible para mí completar esta tarea. El valor es el mensaje enviado.
notificar (valor): envíe un mensaje al cuerpo de ejecución asíncrono del objeto de la promesa para decirle la finalización actual de la tarea. El valor es el mensaje enviado.
Después de enviar estos mensajes, se llamará a la función de devolución de llamada existente.
La promesa es el objeto de promesa con este objeto de diferir. El objeto de promesa se puede obtener a través del diferencial.
Entonces (SuccessCallback, ErrorCallback, NotifyCallback): los parámetros son diferentes funciones de devolución de llamada en diferentes mensajes. Difer envía diferentes mensajes para ejecutar diferentes funciones de devolución de llamada. Los mensajes se pasan como parámetros de estas funciones de devolución de llamada. El valor de retorno ha vuelto a un objeto prometedor que existe en apoyo de las llamadas de la cadena. Cuando el primer objeto de diferir envía un mensaje, el objeto de diferir correspondiente de la promesa posterior también enviará un mensaje, pero los mensajes enviados son diferentes. No importa si el primer objeto de diferir envía rechazo o resolución, el segundo y luego se envían resueltos, y el mensaje es útil.
Catch (ErrorCallback): luego (NULL, ErrorCallback).
Finalmente (devolución de llamada): equivalente a la abreviatura de entonces (devolución de llamada, devolución de llamada). El método en finalmente no acepta parámetros, pero puede pasar con éxito el mensaje y el tipo de mensaje enviado por Difer al siguiente.
Difer (): utilizado para generar un objeto de retraso var defer = $ q.defer ();
rechazar (): el parámetro recibe un mensaje de error, que es equivalente a lanzar una excepción en la función de devolución de llamada, y luego llamar a la función de devolución de llamada incorrecta en la siguiente.
all (): El parámetro se recibe como una matriz de promesa, y se devuelve un nuevo objeto de promesa. Cuando se resuelven todos los objetos de diferir correspondientes de estos objetos de promesa, se resolverá este objeto de promesa único. Cuando uno de estos objetos de promesa es rechazado, esta única promesa también se rechaza.
When (): recibe el primer parámetro como un valor arbitrario o un objeto de promesa, y los otros 3 entonces métodos de la misma promesa, y el valor de retorno es un objeto de promesa. Si el primer parámetro no es un objeto prometedor, la devolución de llamada de éxito se ejecutará directamente y el mensaje es este objeto. Si es una promesa, la promesa devuelta es en realidad un envoltorio para el argumento de este tipo de promesa. El mensaje enviado por el aplazamiento correspondiente a la promesa entrante será recibido por el objeto de la promesa devuelto por nuestra función When.
El uso específico es el siguiente:
En Angular, defina un servicio específicamente para la interacción.
get: function (url, opciones) {<br> var diferido = $ q.defer (); <br> showTip (); $ http.get (url, opciones) .success (function (data) {hidetip (); if (data.success) {Deferred.resolve (data);} else {Deferred.reject (data.message);}}). {hidetip (); Deferred.reject (data);}); return DeferRed.promise;} // La llamada en el controlador get ('url', params) .then (function (data) {// Aquí está exitoso}, function (data) {// aquí está errorcallback});De esta manera, podemos definir algunas indicaciones de manera uniforme cuando se emite cada solicitud, y luego ocultar estas indicaciones después de finalizar la solicitud. En este código, el significado general es que cuando la solicitud es exitosa, Difered.Resolve (datos) se llamará para establecer el estado en el éxito, de modo que la primera función se ejecutará automáticamente, es decir, el éxito de los datos solicitados se pasarán. Cuando la solicitud falle, la segunda función, es decir, se llamará a ErrorCallback.
Lo anterior son las habilidades prácticas de desarrollo de AngularJS que el editor le presentó. 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!