La aplicación TODO de front-end es igual que el "Hola mundo" en la programación normal. Al crear aplicaciones TODO, puede estudiar la implementación de operaciones CRUD utilizando uno u otro marco. Pero a menudo tales proyectos solo se relacionan muy superficialmente con lo que el marco realmente sabe.
Si observa Angular, tiene la sensación de que este marco cambia y se actualiza constantemente. De hecho, con respecto a Angular, podemos resaltar algunas ideas que permanecen sin cambios. El material, cuya traducción publicamos hoy, proporciona una visión general de los conceptos angulares básicos que debe comprender para utilizar de manera correcta y eficiente las capacidades de este marco.
Para aprender Angular, necesitas aprender mucho. Muchos desarrolladores se atascan en las primeras etapas del desarrollo de Angular. Esto se debe al hecho de que no saben a dónde ir, o no saben qué palabras clave deben buscar información que les permita dar un paso adelante. La autora de este material dice que cuando comenzó a aprender Angular 2+, le gustaría que se encontrara con una guía de este marco similar a esta.
1. La arquitectura modular de Angular
En teoría, las aplicaciones angulares se pueden crear poniendo todo el código en una página, en una gran función. Pero hacerlo, por un lado, no se recomienda, y por otro, este enfoque no puede llamarse efectivo desde el punto de vista de estructurar el código. Además, esto tiene sentido de la existencia misma de Angular.
Angular, como parte de su arquitectura de marco, hace un uso extensivo del concepto de módulos. Un módulo es una pieza de código cuya existencia tiene una sola razón. En general, podemos decir que las aplicaciones angulares se ensamblan a partir de módulos. Algunos módulos se usan solo en un lugar de la aplicación, algunos en diferentes lugares.
Hay muchas formas de estructurar módulos dentro de una aplicación. Además, el estudio de varios patrones arquitectónicos ayuda a comprender cómo organizar la estructura de la aplicación con el objetivo de escalarla durante su crecimiento. Además, el uso prudente de los módulos ayuda a aislar el código y evitar la duplicación de código en un proyecto.
La siguiente subsección proporcionará ejemplos de consultas mediante las cuales puede buscar materiales adicionales sobre este tema. Tales subsecciones se encontrarán en otras secciones de este material.
▍Buscar consultas
- Patrones de arquitectura angular.
- Arquitectura de aplicación angular escalable.
2. Flujo de datos unidireccional e inmutabilidad
A muchos desarrolladores que utilizan Angular 1 les gustó el concepto de enlace bidireccional. Esto, de hecho, era una de las cualidades atractivas de Angular. Pero con el tiempo, a medida que las aplicaciones angulares se volvieron más complejas, se hizo evidente que el enlace bidireccional crea problemas de rendimiento.
Resultó que la unión bidireccional, de hecho, no es necesaria tan a menudo.
En Angular 2+, aún puede usar el enlace bidireccional, pero solo cuando el desarrollador expresa explícitamente su intención de usar esta función. Este enfoque hace que quienes escriben el código de la aplicación piensen en la dirección de los flujos de datos. Esto, además, permite un trabajo más flexible con los datos. La flexibilidad se logra a través de la capacidad de personalizar exactamente cómo se deben mover los datos en la aplicación.
▍Buscar consultas
- Mejores prácticas de flujo de datos angular.
- Flujo unidireccional en angular.
- Ventajas del enlace unidireccional.
3. Atributo y directivas estructurales de Angular
Una directiva es una extensión de HTML a través de elementos personalizados. Las directivas de atributos, o atributos, le permiten cambiar las propiedades de los elementos. Las directivas estructurales le permiten influir en el contenido de las páginas eliminando elementos del DOM o agregándolos al DOM.
Por ejemplo,
ngSwitch y
ngIf son directivas estructurales, ya que evalúan los parámetros que se les pasan y determinan si ciertas partes del DOM deben estar presentes o no en el documento.
Los atributos son mecanismos para cambiar el comportamiento estándar de los elementos, personalizable por el programador.
Aprender a usar estos dos tipos de directivas ayudará a ampliar las capacidades de su aplicación y reducirá la cantidad de código duplicado. Las directivas de atributos, además, pueden ayudar a resaltar algunas plantillas para cambiar elementos que se utilizan en diferentes lugares de la aplicación.
▍Buscar consultas
- Directivas de atributo angular (directivas de atributo angular).
- Directivas estructurales angulares.
- Patrones de directivas estructurales angulares.
4. Métodos del ciclo de vida de los componentes.
Cada parte del código tiene su propio ciclo de vida, que determina cómo se crea algo, se muestra en la pantalla y luego desaparece. Angular tiene un concepto llamado ciclo de vida de un componente. Se parece a esto:
- Creación.
- Renderizado
- Representación de componentes secundarios.
- Verifique los cambios en las propiedades relacionadas con los datos.
- Destrucción
- Eliminando del DOM.
El programador tiene la oportunidad de intervenir en el componente en momentos clave de este ciclo, enfocándose, por ejemplo, en ciertos eventos. Esto le permite personalizar cómo se comporta el programa en varios puntos del ciclo de vida del componente.
Por ejemplo, es posible que deba cargar algunos datos antes de que se muestre la página. Puede hacer esto en el método del ciclo de vida del componente
ngOnInit() . O, tal vez en algún momento de la aplicación, necesite desconectarse de la base de datos. Puede hacer esto en el método
ngOnDestroy() .
▍Buscar consultas
- Ganchos angulares del ciclo de vida.
- Componente ciclo de vida.
5. Servicios HTTP y objetos observables
Lo que estamos hablando aquí es más probable que no esté relacionado con las características especiales de Angular, sino con ES7. Dio la casualidad de que en Angular, el trabajo con objetos Observables se implementa a nivel de marco. Existen mecanismos similares en React, Vue y otras bibliotecas y marcos basados en JavaScript.
Los objetos observables son patrones que lo ayudan a trabajar eficientemente con datos en sistemas basados en eventos. Para desarrollar efectivamente aplicaciones angulares, necesita saber cómo usar los servicios HTTP y los objetos Observables.
▍Buscar consultas
- Patrones observables de JavaScript (Plantillas de objetos observables de JavaScript).
- HTTP angular y observables (HTTP y objetos observables en angular).
- Característica observable de ES7 (objetos observables en ES7).
6. Componentes inteligentes y estúpidos
Muchos, en desarrollo de aplicaciones angulares, se esfuerzan por poner todo lo que se necesita para el funcionamiento de estos componentes. Es cierto que esto no es algo que pueda recomendarse para un uso práctico. La idea de usar componentes "inteligentes" y "estúpidos" en Angular es un concepto que, quizás, debería hablarse con más frecuencia de lo que están hablando ahora, especialmente en los círculos de desarrolladores novatos.
Si el componente es inteligente o estúpido determina su papel en el diseño general del dispositivo de aplicación. Los componentes "tontos" a menudo no tienen estado, difieren en un comportamiento simple, predecible y comprensible. Se recomienda, siempre que sea posible, centrarse en la creación y el uso de componentes "estúpidos".
Es más difícil trabajar con componentes "inteligentes", ya que, en el curso del trabajo, reciben algunos datos de entrada y generan algunos datos de salida. Para utilizar Angular de manera efectiva, familiarícese con el concepto de componentes inteligentes y tontos. Este conocido le proporcionará patrones e ideas sobre cómo organizar fragmentos de código de aplicación y cómo construir relaciones entre estos fragmentos entre sí.
▍Buscar consultas
- Componentes angulares inteligentes / tontos.
- Componentes tontos sin estado.
- Componentes de presentación.
- Componentes inteligentes en Angular.
7. La estructura de la aplicación y recomendaciones prácticas para su formación.
Si hablamos sobre la estructura de la aplicación y la aplicación de recomendaciones prácticas al crearla, entonces las herramientas de línea de comando angular pueden proporcionar al menos algo de ayuda al programador. Desarrollar una aplicación angular (o cualquier otra aplicación) es como construir una casa. Es decir, estamos hablando de métodos prácticos que han sido desarrollados y optimizados por la comunidad de desarrolladores durante años. El uso de tales técnicas para estructurar aplicaciones conduce a la aparición de proyectos de alta calidad. En realidad, esto se aplica a Angular.
Cuando los programadores novatos que intentan aprender Angular se quejan de este marco, la razón de tales quejas suele ser la falta de conocimiento sobre la estructura de las aplicaciones. Los principiantes entienden fácilmente la sintaxis, aquí no tienen problemas. Pero encontrar el enfoque correcto para estructurar aplicaciones es mucho más difícil para ellos. Aquí debe comprender el área temática para la que se crea la aplicación, debe conocer los requisitos para la aplicación y cómo se relacionan la realidad y las expectativas en los niveles conceptual y práctico.
Estudiar las posibles opciones para las estructuras de las aplicaciones angulares y las recomendaciones prácticas para usar estas estructuras le dará al programador una visión de cómo crear sus propios proyectos.
▍Buscar consultas
- Aplicaciones angulares de repositorio único (aplicaciones angulares alojadas en un repositorio único).
- Bibliotecas angulares (bibliotecas angulares).
- Paquetes angulares.
- Paquetes angulares (paquetes angulares).
- Micro aplicaciones angulares.
- Monorepo (Monorepositorios).
8. Sintaxis y patrones de enlace de datos
El enlace, o enlace de datos, es quizás la característica más notable de los marcos de JavaScript. Además, esta es una de las razones por las que generalmente existen marcos. El enlace de datos en plantillas es el puente entre HTML estático y JavaScript. La sintaxis de enlace de datos en plantillas angulares desempeña el papel de un intermediario para ayudar a comunicar entidades HTML y JavaScript.
Después de aprender cómo y cuándo usar las anclas, puede convertir fácilmente las páginas estáticas en algo interactivo. En esta área, se recomienda prestar atención a varios escenarios de enlace de datos. Por ejemplo, este es un enlace de propiedades, eventos, esto es interpolación de datos y enlace bidireccional.
▍Buscar consultas
- Enlace angular de propiedad.
- Evento angular vinculante.
- Enlace bidireccional angular (enlace de datos bidireccional angular).
- Interpolación angular (Interpolación en angular).
- Constantes de paso angular (constantes de paso angular).
9. Módulos de características y enrutamiento
Los módulos de características en Angular son una tecnología infravalorada. Dichos módulos, de hecho, proporcionan al desarrollador una forma fantástica de organizar y aislar conjuntos de requisitos empresariales para las aplicaciones. Ayudan a limitar la responsabilidad de los fragmentos de código y a prevenir, a la larga, la contaminación del código.
Existen cinco tipos de módulos de funciones (Dominio, Enrutado, Enrutamiento, Servicio, Widget), cada uno de ellos es responsable de la implementación de una determinada funcionalidad. Aprender a usar los módulos de funciones junto con el enrutamiento puede ayudar a crear bloques separados de funcionalidad. Esto ayudará e implementará en las aplicaciones un esquema claro y de alta calidad de separación de responsabilidades.
▍Buscar consultas
- Módulos de características angulares (módulos de características en angular).
- Estructuras de características compartidas en Angular.
- Proveedores de módulos de funciones.
- Carga diferida con enrutamiento y módulos de características (Carga diferida con enrutamiento y módulos de características).
10. Formularios y validación de datos (formularios reactivos y validadores)
Los formularios son una parte inevitable de cualquier desarrollo front-end. Y donde se utilizan formularios, también se necesita validación de datos.
Angular tiene varias formas de construir formas inteligentes basadas en datos. Las formas reactivas son especialmente populares. Sin embargo, hay otras opciones, en particular, estos son formularios cuya validación se basa en plantillas, así como el uso de validadores personalizados.
Aprender cómo los validadores y CSS trabajan juntos ayudará a acelerar el desarrollo de aplicaciones y facilitará el manejo de errores en los formularios.
▍Buscar consultas
- Validación de forma angular.
- Validación dirigida por plantilla
- Validación de forma reactiva.
- Validadores de sincronización y asíncrono en angular (validadores síncronos y asíncronos en angular).
- Validadores incorporados.
- Validadores angulares personalizados.
- Validación de campo cruzado.
11. Proyección de contenido.
Angular tiene un mecanismo llamado proyección de contenido. Le permite organizar la transferencia eficiente de datos de componentes principales a componentes secundarios. Aunque la idea de proyectar contenido puede parecer complicada, su esencia radica en el hecho de que para construir un elemento que se muestra en la pantalla, algunos elementos se colocan en otros.
Los desarrolladores a menudo estudian la proyección de contenido en un nivel superficial, por ejemplo, acostumbrándose al esquema en el que un componente secundario está incrustado en el componente principal. Pero para ampliar nuestra comprensión de este concepto, también debemos comprender cómo se transfieren los datos entre diferentes componentes visuales. Aquí es donde la comprensión de las características de la proyección de contenido será muy útil.
Comprender este concepto ayuda a comprender las características del movimiento de los flujos de datos dentro de la aplicación y dónde ocurren exactamente las mutaciones de estos datos.
▍Buscar consultas
- Proyección de contenido angular.
- Relación de vista angular padre-hijo (relación angular padre-hijo y componentes visuales de Angular).
- Vista angular de las relaciones de datos.
12. Estrategia de detección de cambios onPush
De forma predeterminada, Angular utiliza una estrategia de detección de cambios estándar. Con este enfoque, las comprobaciones de componentes están en curso. Aunque no hay nada de malo en esto, este enfoque para detectar cambios puede no ser efectivo.
Si hablamos de pequeñas aplicaciones, su rendimiento no se ve particularmente afectado. Pero una vez que la aplicación crece hasta cierto tamaño, su velocidad, especialmente cuando se inicia en navegadores más antiguos, puede deteriorarse.
La
onPush detección de cambios
onPush puede acelerar drásticamente la aplicación. El hecho es que cuando se usa, las comprobaciones se realizan solo cuando ocurren ciertos eventos. Esto es mucho mejor que los controles constantes.
▍Buscar consultas
- Detección de cambio angular onPush (estrategia de detección de cambio angular onPush).
13. Restringir el acceso a rutas, precarga, carga diferida
Si su proyecto tiene mecanismos que proporcionan acceso de usuario al sistema, esto significa que debe usar la restricción de acceso a las rutas. Muchas aplicaciones requieren la capacidad de proteger ciertas páginas de la visualización no autorizada. Las restricciones de acceso a la ruta funcionan como una interfaz entre el enrutador y la ruta solicitada. Toman decisiones sobre si el acceso a una ruta en particular está permitido en una determinada situación. En el área de protección de rutas, hay mucho que será útil para aprender. En particular, esta es una toma de decisiones basada en el análisis del período de validez del token, el uso de roles de autenticación y la provisión de trabajo seguro con rutas.
La precarga y la carga diferida de datos pueden mejorar la experiencia del usuario de trabajar con el sitio al reducir el tiempo de carga de la aplicación. Será útil decir que las tecnologías de carga pre perezosas no solo están relacionadas con las imágenes. Estas tecnologías se utilizan al dividir paquetes de aplicaciones en partes y al cargar diferentes partes de estos paquetes en diferentes condiciones.
▍Buscar consultas
- Guardias de ruta angular (Restricción del acceso a rutas en Angular).
- Patrones de autenticación angular.
- Módulos de precarga angular y carga diferida (módulos de precarga y carga diferida en angular).
- Patrones de ruta asegurados angulares.
14. Transportadores personalizados
Las tuberías angulares facilitan el formateo de los datos. Hay muchos transportadores incorporados que le permiten resolver una amplia gama de tareas estándar. Entre ellas están las tareas de formatear fechas, importes de moneda, valores de porcentaje, así como, por ejemplo, trabajar con mayúsculas y minúsculas. Sin embargo, siempre hay una tarea para la cual no existe un transportador estándar.
Es en tales casos que se necesitan tuberías personalizadas. Este mecanismo le permite al programador crear sus propios filtros y describir las transformaciones de datos que necesita. Usar todo esto no es difícil, por lo tanto, este concepto se puede recomendar para estudio.
▍Buscar consultas
- Tubos angulares personalizados.
15. Decoradores @ViewChild y @ContentChild
Los componentes pueden comunicarse entre sí gracias a los
@ContentChild @ViewChild y
@ContentChild . La esencia de Angular es hacer que las aplicaciones de múltiples componentes creadas con este marco se vean como un rompecabezas. Pero tal rompecabezas no será de mucha utilidad si sus fragmentos están aislados unos de otros.
Para conectar piezas de rompecabezas entre sí,
@ContentChild los decoradores
@ViewChild y
@ContentChild . Estudiar las características de su uso le dará la oportunidad de trabajar con componentes asociados con otros componentes. Esto simplifica la tarea de organizar el intercambio de datos entre varios componentes. Esto le permite transferir datos e información sobre eventos que ocurren en estos componentes entre componentes.
▍Buscar consultas
- Decoradores angulares (Decoradores en angular).
- Viewchild y contentchild en Angular (Decoradores
@ViewChild y @ContentChild en Angular). - Componente angular de intercambio de datos.
16. Componentes dinámicos y la directiva ng-template
Los componentes son los componentes básicos de las aplicaciones angulares. Sin embargo, no todos los componentes deben crearse de antemano. Algunos de ellos deben crearse mientras se ejecuta el programa.
Los componentes dinámicos permiten que una aplicación cree lo que necesita mientras se está ejecutando.
Los componentes estáticos, a diferencia de los dinámicos, se crean de antemano. Esto se hace en casos donde no se espera que los componentes puedan verse afectados. Son predecibles, de manera predeterminada, realizando conversiones de los datos que ingresan.
Los componentes dinámicos, por otro lado, se crean a medida que surge la necesidad de ellos. Resultan muy útiles al desarrollar aplicaciones que funcionan con fuentes de datos externas. Son útiles incluso cuando necesita organizar la reacción de la aplicación a las acciones que ocurren en la página.
▍Buscar consultas
- Componentes dinámicos en angular.
- Componentes dinámicos y plantillas ng (componentes dinámicos y directiva ng-template).
17. Decoradores @Host , @HostBinding y exportAs directive
Los
@HostBinding @Host ,
@HostBinding y la directiva
@HostBinding exportAs utilizan en Angular para controlar a qué se aplican. Además, permiten crear plantillas concisas para exportar entidades que se pueden utilizar en la aplicación.
Si lo anterior no le parece particularmente claro, le recomendamos que se familiarice con las directivas y descubra por qué son necesarias. Los
@HostBinding @Host ,
@HostBinding y la directiva
@HostBinding son los que ayudan a Angular a ser lo que es.
▍Buscar consultas
- Patrones de directivas angulares (patrones de directivas angulares).
@Host , @HostBinding y exportAs en Angular (Decoradores @Host , @HostBinding y la directiva exportAs en Angular).
18. Administración del estado de la aplicación usando NgRx
El estado de la aplicación está determinado por lo que ve el usuario. Si reina la confusión en el estado de la aplicación, esto puede indicar que las estructuras de datos utilizadas en él están mal adaptadas a los cambios. Es posible que sea necesario realizar dichos cambios en las estructuras de datos a medida que la aplicación crece y se desarrolla.
Cuando alguien comienza a comprender los detalles de trabajar con el estado en Angular, también se acerca a comprender los detalles del comportamiento de los datos en sus aplicaciones.
Angular tiene su propio sistema de gestión estatal. Sin embargo, hay una tecnología, NgRx, que le permite llevar la administración del estado de la aplicación a un nivel superior. En particular, por ejemplo, los datos pueden perderse al transferirlos entre una pluralidad de componentes principales y componentes secundarios. Y NgRx le permite crear un repositorio centralizado y deshacerse de este problema.
▍Buscar consultas
- Angular NgRx (Usando RxJS en Angular).
- Principios de flujo / Redux.
- Principios angulares de gestión del estado.
19. Dependencia e inyección de zona
La inyección de dependencia es un concepto masivo y universal. Si no está muy familiarizado con él, debe estudiarlo. Angular tiene muchas formas de inyectar dependencias con precisión. Esto se logra principalmente mediante el uso de constructores. Se trata de importar al código solo lo que realmente se necesita. Esto ayuda a mejorar el rendimiento de la aplicación.
El concepto de zonas, como la idea de inyección de dependencia, no es exclusivo de Angular. Este es un mecanismo que permite que una aplicación monitoree el estado de las tareas asincrónicas a lo largo de su ciclo de vida. — , , — , . .
▍
- Angular zones ( Angular).
- Dependency injections ( ).
- Angular DI ( Angular).
Resumen
Angular- — . — - , , , . . , , Angular, .
Estimados lectores! Angular-?
