Se cree que en el desarrollo front-end, el equivalente a "
Hola mundo " es una aplicación, una lista de tareas. Sí, esto le permite cubrir el aspecto CRUD de la creación de una aplicación, pero las capacidades del marco o la biblioteca utilizados a menudo se ven muy superficialmente.
Angular cambia y se actualiza constantemente, pero algo sigue igual. Hablaré sobre los conceptos angulares básicos que necesita aprender si desea utilizar este marco JavaScript de la mejor manera.
Hay mucho que aprender a trabajar con Angular, y los recién llegados a menudo se quedan atrapados en el nivel de entrada solo porque no saben dónde y qué buscar. Por lo tanto, escribí una guía (que incluye un breve resumen de los conceptos básicos de Angular), que yo mismo sería muy útil cuando comenzara a trabajar con Angular 2+.
Traducido a Alconost1. La arquitectura modular de Angular
Teóricamente, puede poner todo el código Angular en una página y en una gran función, pero esto no se recomienda: esta es una forma ineficiente de estructurar el código que le impide revelar el propósito de Angular.
Parte de la arquitectura de este marco es el uso activo del concepto de módulos, que son códigos que tienen un único propósito. Una aplicación angular consiste básicamente en módulos, algunos de los cuales están aislados, mientras que otros son comunes.
Hay una variedad de formas de organizar módulos en una aplicación. Al explorar varias estructuras arquitectónicas, puede determinar cómo se escalará la aplicación a medida que se desarrolla, y también aprender a aislar el código y reducir la interdependencia.
Qué googlear:- Patrones arquitectónicos angulares,
- Arquitectura de aplicación escalable angular.
2. Flujo de datos unidireccional e inmutabilidad
La unión bilateral se ganó los corazones de muchos desarrolladores front-end en los días de Angular 1; de hecho, esta fue una de las principales características distintivas de este marco. Sin embargo, a medida que se desarrolló la aplicación, este enfoque comenzó a crear problemas en términos de rendimiento.
Resultó que la unión bidireccional no es necesaria en todas partes
Angular 2+ todavía hace posible implementarlo, pero para esto debe solicitarse explícitamente, por lo tanto, el desarrollador tiene que pensar en los flujos de datos y su dirección. Además, esto permite que la aplicación maneje los datos de manera más flexible, ya que puede especificar cómo transferirlos.
Qué googlear:- trabajar con flujos de datos en Angular,
- flujo unidireccional en angular,
- Beneficios del chasquido unidireccional.
3. Directivas atributivas y estructurales.
Una directiva es una extensión de HTML con elementos adicionales. Las directivas de atributos le permiten cambiar las propiedades de un elemento. Las directivas estructurales cambian el diseño agregando o eliminando elementos DOM.
Por ejemplo,
ngSwitch y
ngIf son directivas estructurales: evalúan los parámetros y determinan si deben existir partes específicas del DOM.
Las directivas de atributos son comportamientos personalizados adjuntos a un elemento, componente u otras directivas.
Al aprender a usar las directivas de estos dos tipos, puede ampliar las capacidades de su propia aplicación y reducir la duplicación de código en el proyecto. Las directivas de atributos también ayudan a centralizar el comportamiento específico utilizado en varias partes de la aplicación.
Qué googlear:- Directivas de atributos angulares,
- Directivas estructurales angulares,
- Plantillas de directivas estructurales angulares.
4. Controladores del ciclo de vida de los componentes.
Cada aplicación tiene un ciclo de vida que determina cómo se crean, procesan y luego eliminan los objetos. En el marco angular, el ciclo de vida del componente se ve más o menos así:
→ → → → → DOM
Tenemos la oportunidad de procesar los puntos clave de este ciclo y centrarnos en puntos específicos en el tiempo o eventos. Esto le permite crear respuestas apropiadas y personalizar el comportamiento de acuerdo con las diversas etapas del componente.
Por ejemplo, si desea cargar algunos datos antes de representar la página, esto puede hacerse a través de
ngOnInit() . Y si necesita desconectarse de la base de datos, esto se puede hacer en el momento de
ngOnDestroy() .
Qué googlear:- controladores de ciclo de vida de componentes en Angular;
- ciclo de vida del componente.
5. Servicios observados y HTTP
Los servicios observados no son una característica única de Angular, sino algo de ES7. Sin embargo, esta funcionalidad se implementó dentro del marco del marco, y las ideas correspondientes también se transfieren bien a React, Vue y otras bibliotecas y marcos relacionados con JavaScript.
Qué googlear:- Patrones de observador de JavaScript
- objetos observados y HTTP en angular,
- Objetos observados en ES7.
6. La arquitectura de componentes inteligentes y estúpidos.
A menudo, al escribir aplicaciones en Angular, todo se vierte en un componente, pero este no es el mejor enfoque. El concepto de componentes inteligentes y tontos en Angular definitivamente merece más atención, especialmente entre los principiantes.
El papel del componente en el plan general de la aplicación está determinado por si es "estúpido" o "inteligente". Los componentes "tontos" generalmente no rastrean el estado, y su comportamiento es fácil de predecir y comprender; si es posible, los componentes deben hacerse de esa manera.
Los componentes inteligentes son más difíciles de entender porque involucran entradas y salidas. Para aprovechar al máximo las capacidades de Angular, debe comprender la arquitectura de los componentes inteligentes y estúpidos: de esta manera dominará las plantillas y las formas de pensar que lo ayudarán a escribir código más productivo y construir la interacción correcta dentro de la aplicación.
Qué googlear:- Componentes angulares inteligentes y estúpidos,
- estúpidos componentes sin estado
- componentes de presentación
- Componentes angulares inteligentes.
7. Estructuras de aplicación estándar.
La capacidad de trabajar con la línea de comandos para determinar la estructura de la aplicación es útil, pero no es una panacea. Crear una aplicación en Angular (y cualquier aplicación en general) es similar a construir una casa: existen procesos bien establecidos que han sido optimizados por la comunidad durante muchos años y le permiten escribir aplicaciones más eficientes y productivas.
Y Angular aquí no es una excepción.
La mayoría de las quejas sobre Angular se pueden escuchar de aquellos que intentan estudiarlo sin comprender la estructura. Se captura una sintaxis clara y concisa sobre la marcha, sin embargo, para comprender la estructura de la aplicación, debe conocer el contexto, los requisitos y cómo encaja todo a nivel conceptual y práctico. Después de estudiar las diversas estructuras posibles de las aplicaciones angulares y las recomendaciones para su aplicación, tendrá una idea de cómo escribir la suya.
Qué googlear:- Aplicaciones angulares con un repositorio,
- Bibliotecas angulares, paquetes angulares,
- Paquetes angulares
- Micro aplicaciones angulares.
- monorepositorios.
8. Sintaxis para el enlace de plantillas
Lo más destacado del marco de JavaScript en cuestión es el enlace, y también se ha convertido en una de las razones de su creación. El enlace de plantilla combina HTML y JavaScript estáticos, y la sintaxis de enlace de plantilla de Angular actúa como intermediario entre las dos tecnologías.
Si aprende a usar estas funciones de manera adecuada y oportuna, convertir una página estática en algo interactivo será mucho más fácil y divertido. Explore varios escenarios de enlace: enlace de propiedad, enlace de evento, interpolación y enlace bidireccional.
Qué googlear:- vinculante a propiedades en Angular,
- enlace de eventos en angular,
- enlace bidireccional en angular, interpolación en angular,
- pasando constantes a Angular.
9. Enrutamiento y módulos de funciones
En el caso de Angular, los módulos funcionales generalmente se subestiman, aunque en realidad esta es una excelente manera de racionalizar y restringir un conjunto de requisitos comerciales. Ayudan a diferenciar las responsabilidades y ayudan a prevenir la contaminación del código a largo plazo.
Hay cinco tipos de módulos funcionales (dominio, enrutamiento, enrutamiento, servicio y widget), y cada uno tiene su propio conjunto de capacidades. Al aprender a usar módulos funcionales en combinación con el enrutamiento, puede crear conjuntos de funciones separados y proporcionar una separación comprensible y conveniente de las capacidades de la aplicación.
Qué googlear:- Módulos de funciones angulares,
- estructuras funcionales comunes en angular,
- proveedores de módulos de funciones.
- carga perezosa con enrutamiento y módulos de funciones.
10. Formularios y validación de datos (formularios reactivos y validadores)
Los formularios son una parte integral del desarrollo front-end.
Y donde hay formularios, hay verificación de datos.
Puede crear formularios inteligentes que funcionen bien con datos en el marco Angular de varias maneras, y los formularios reactivos son el enfoque más común. Sin embargo, hay otras opciones, a saber, validadores personalizados y de plantilla.
Al comprender cómo funcionan los validadores y CSS, puede acelerar su flujo de trabajo y preparar su aplicación para el manejo de errores.
Qué googlear:- validación de formularios en angular,
- validación de datos basada en plantillas,
- validación de formas reactivas,
- validadores síncronos y asíncronos en angular,
- validadores incorporados
- validadores personalizados en Angular,
- campos de verificación cruzada.
11. Proyección de contenido.
El marco angular tiene un concepto tal como proyectar contenido, que le permite transferir efectivamente datos de componentes principales a secundarios. Al principio, esto puede parecer complicado, pero de hecho, en este caso, las vistas se colocan dentro de otras vistas, esto crea la vista principal.
A menudo, la proyección de contenido se entiende superficialmente: como si estuviéramos incorporando vistas secundarias en la vista principal. Sin embargo, para una comprensión más profunda del marco, es necesario comprender cómo se transfieren los datos entre diferentes representaciones; aquí es donde es útil el conocimiento del concepto de proyección de contenido.
Después de estudiar la proyección del contenido, aprenderá a comprender el flujo de datos de la aplicación y determinar dónde se someten los cambios.
Qué googlear:- proyectar contenido en angular,
- relación de las opiniones de padres e hijos en Angular,
- relaciones entre datos en vistas angulares.
12. Estrategia de detección de cambios "onPush"
Por defecto, Angular utiliza una estrategia de detección de cambios estándar en la que los componentes siempre se verifican. No hay nada de malo en usar el comportamiento predeterminado; sin embargo, dicha detección de cambios puede ser ineficaz.
Para aplicaciones pequeñas, la velocidad y el rendimiento siguen siendo satisfactorios. Pero tan pronto como la aplicación alcanza un cierto tamaño, el lanzamiento de algunos elementos se ralentiza, especialmente en los navegadores más antiguos.
La
onPush detección de cambios
onPush acelera significativamente la aplicación porque no se basa en una verificación constante, sino que depende de la operación de disparadores específicos.
Qué googlear:- detectar cambios onPush en Angular.
13. Defensores de ruta, carga previa y demorada
Si la aplicación tiene un inicio de sesión de cuenta, necesitará defensores de ruta. La conclusión es proteger ciertas vistas de la visualización no autorizada, que en muchos casos es un requisito obligatorio. Los defensores de ruta actúan como la interfaz entre el enrutador y la ruta solicitada: determinan si se permite o no el acceso a una ruta específica. Este es un tema bastante extenso: por ejemplo, incluye la cuestión de tomar decisiones sobre el enrutamiento en función del período de validez de los tokens, la autenticación de los roles de los usuarios y la protección de las rutas.
Para acelerar la carga de la aplicación y hacer que trabajar con ella sea más conveniente, también será útil la carga preliminar y demorada. También se debe tener en cuenta que estas herramientas no solo permiten decidir si descargar un conjunto específico de imágenes: ayudan a mejorar la arquitectura asociada y a cargar diferentes partes de la aplicación que pueden estar en diferentes dominios y áreas de definición.
Qué googlear:- guardias de ruta en Angular,
- patrones de autenticación en angular,
- Módulos angulares pre y post carga
- Plantillas de rutas seguras en Angular.
14. Canales personalizados
Los canales de marco angular simplifican enormemente el formateo de datos. Muchos tipos de formato (fechas, monedas, porcentajes y mayúsculas y minúsculas) ya están cubiertos por canales preconfigurados y listos para usar, sin embargo, probablemente necesitará algo más.
Y aquí los canales no estándar son útiles, lo que facilita la creación de sus propios filtros y la conversión de formatos de datos de la manera deseada. Es bastante fácil, pruébalo.
Qué googlear:- canales no estándar en angular.
15. Decoradores @ViewChild y @ContentChild
ViewChild y
ContentChild se utilizan para comunicarse entre componentes. La esencia del marco angular es que se utilizan varios componentes ensamblados juntos, como un mosaico. Sin embargo, este diseño no puede hacer nada si sus piezas están aisladas unas de otras.
Para esto, se necesitan los decoradores
ViewChild y
ContentChild , habiendo aprendido cómo usarlos, podrá acceder a componentes relacionados, lo que simplifica la tarea de intercambiar datos y también hace posible transferir datos y eventos causados por componentes relacionados.
Qué googlear:- Decoradores angulares,
ViewChild y ContentChild en Angular,
- intercambio de datos entre componentes en Angular.
16. Componentes dinámicos y "ng-template"
En el marco angular, las aplicaciones se crean sobre la base de componentes. Sin embargo, no todos los componentes son estáticos, algunos deben crearse sobre la marcha, no precompilados.
Los componentes creados por la aplicación sobre la marcha se denominan dinámicos. Los componentes estáticos suponen una cierta inmutabilidad: esperamos ciertos valores en la entrada y la salida y el comportamiento predecible correspondiente.
Los componentes dinámicos se representan según sea necesario. Son convenientes para usar cuando se crean aplicaciones que pueden escuchar fuentes externas, cambiar su estado o representar reacciones a acciones que ocurrieron en la página.
Qué googlear:- componentes dinámicos en angular,
- componentes dinámicos y ng-template.
17. Host , enlace de host y "exportAs"
@Host ,
@HostBinding son decoradores, y
exportAs es una propiedad del decorador @Directive. Su propósito es extender el efecto de los parámetros a los que están unidos. También proporcionan la capacidad de crear pequeñas plantillas de exportación para usar dentro de la aplicación.
Si lo anterior suena incomprensible, debe estudiar las directivas angulares y comprender su propósito.
@Host ,
@HostBinding y
exportAs son elementos importantes del concepto de directivas.
Qué googlear:- Patrones de uso de directivas angulares
@Host , @HostBinding y exportAs en Angular.
18. Gestión del estado utilizando NgRx
El estado de la aplicación determina en última instancia los datos que se muestran al usuario. Y si la aplicación es un montón de espagueti, entonces existe la posibilidad de que toda la estructura de datos no sea confiable y, en caso de cualquier cambio, simplemente se bloquee.
Comprender por qué se necesitan estados en Angular le permite comprender cómo y por qué los datos se comportan de esta manera y no de otra manera.
El marco angular tiene su propio sistema de gestión de estado, pero NgRx hace un trabajo mucho mejor al centralizar estados y datos asociados. Los datos pueden perderse en la cadena de relación padre-hijo, y NgRx crea un repositorio centralizado para ellos y elimina este problema.
Qué googlear:- NgRx angular,
- Principios de Flux y Redux
- Principios angulares de gestión del estado.
19. Zonas e inyección de dependencias.
La inyección de dependencia es generalmente un concepto a gran escala, por lo que si no está completamente en el tema, debe entender más. Dentro de Angular, hay varias formas de inyectar dependencias cuidadosamente, pero esto se hace principalmente usando el constructor. Por lo tanto, no puede descargar todo en una fila, sino importar lo más necesario y, por lo tanto, aumentar la eficiencia de la aplicación.
Al igual que la inyección de dependencia, había "zonas" antes de Angular. Permiten que la aplicación detecte tareas asincrónicas. Esto es importante porque las tareas asincrónicas pueden cambiar el estado interno de la aplicación y, por lo tanto, la presentación. Las zonas facilitan la detección de cambios.
Qué googlear:- zonas en angular,
- inyección de dependencia
- DI angular.
Conclusión
Angular es un tema extenso para explorar. Al crear aplicaciones en este marco, puede aprender mucho, pero a veces no está completamente claro qué buscar y dónde excavar. Al principio, puede ser difícil navegar en un entorno desconocido. Con suerte, este breve tutorial ha proporcionado una idea de los conceptos que van más allá de los tutoriales angulares habituales, y ha permitido una visión más amplia de este marco en su conjunto.
Sobre el traductorEl artículo fue traducido por Alconost.
Alconost
localiza juegos ,
aplicaciones y sitios en 70 idiomas. Traductores en lengua nativa, pruebas lingüísticas, plataforma en la nube con API, localización continua, gestores de proyectos 24/7, cualquier formato de recursos de cadena.
También hacemos
videos de publicidad y capacitación , para sitios que venden, imágenes, publicidad, capacitación, teasers, expliner, trailers de Google Play y App Store.
→
Leer más