Angular arquitectura de componentes simplificada

Si bien no había nada necesariamente malo con el enfoque Angular JS adoptó, la arquitectura basada en componentes empleada por Angular ha demostrado ser un paradigma muy flexible que es fácilmente comprensible y aplicado por desarrolladores de una variedad de orígenes. Una vez que reconoces la analogía entre "Componente" y "Control de usuario", la amplia gama de oportunidades de reutilización y composición, y el poder que proporcionan, se hacen evidentes.

En este artículo, a excepción de Angular Essentials, un libro electrónico de Infragistics puedes descargar gratis ahora mismo, obtendrás una introducción de alto nivel a Angular arquitectura de componentes y las diversas funciones disponibles en la plataforma para ayudarte a crear aplicaciones complejas para la web moderna.

Angular Estructura de la aplicación

Angular utiliza ampliamente los componentes. Una aplicación Angular típica consta de componentes para definir cada parte de la página. Los componentes se añaden a Angular módulos.

Piense en una aplicación Angular como un árbol de componentes. Estos componentes están vinculados entre sí. El componente superior es el componente raíz, que contiene todos los demás componentes y es utilizado por el Angular programa previo para iniciar la aplicación.

Este es un árbol de componentes típico en una aplicación Angular:

 

Estructura de árbol de componentes en una aplicación Angular

Cada componente es una pieza autosuficiente de la interfaz de usuario, la pantalla o la ruta. Un componente es una combinación de una vista y su modelo de vista. Utiliza Services para obtener los datos y muestra esos datos en vistas.

Cuando la aplicación se divide en varias vistas y las vistas deben cargarse en función de la dirección URL actual, cada ruta se maneja con un componente. La ruta invoca este componente cuando se tiene que cargar.

Angular aplicaciones son modulares. Angular hace uso de varios módulos ES6 para mantener el código fuente modularizado, y utiliza su propio sistema de módulos para agrupar un conjunto de bloques de Angular relacionados. Es importante entender que el propósito de los sistemas modulares ES6 es diferente al del sistema de módulos Angular.

El sistema de módulos ES6 ayuda a mantener los archivos de origen lo más ajustados posible. Cada archivo contiene un componente, una directiva, un servicio o cualquier otro bloque. Estos archivos exportan sus objetos mediante la palabra clave export y otros módulos los importan mediante la palabra clave import. Las bibliotecas de terceros utilizadas en la aplicación también se cargan como módulos ES6. Por otro lado, los módulos Angular se utilizan para agrupar un conjunto de bloques Angular. Estos módulos se pueden utilizar para dividir una aplicación en varios módulos en función de la funcionalidad de un conjunto de bloques. Un módulo puede acceder a otros módulos para utilizar su funcionalidad.

Angular hace un uso extensivo de la inyección de dependencias (DI) para cargar los objetos necesarios en cualquier bloque de código. Proporciona una única API para DI, que viene con toda la potencia necesaria para una aplicación compleja. La combinación de modularidad e DI hace que Angular código sea mucho más limpio de leer y probar.

Una aplicación Angular se construye utilizando varios componentes, servicios, directivas, tuberías y otras piezas. Exploremos lo que hace cada uno.

Directivas

Las directivas no son nuevas en Angular, pero se han mejorado desde Angular JS. La arquitectura de directivas en Angular reduce la necesidad de manipulación directa del DOM al proporcionar un mejor sistema de enlace. A diferencia de Angular JS, donde una directiva debe nombrarse en notación de mayúsculas y minúsculas y usarse en la interfaz de usuario con notación discontinua, Angular tiene una forma unificada de nombrar y usar la directiva.

Angular 2 has three types of directives:

Componentes

Una aplicación Angular comienza con un componente; Cada ruta está asociada a un componente y utiliza componentes para definir diferentes niveles de la aplicación. Los componentes consisten en una plantilla HTML, así como la lógica para construir un modelo de vista para esta plantilla. Las plantillas HTML utilizan la sintaxis de enlace de Angular para vincular las propiedades y los métodos del modelo de vista en la vista. Un componente puede cargar otro componente en su plantilla e interactuar con él.

Los componentes tienen ganchos de ciclo de vida como ngOnInit(), ngOnDestroy() que permiten que la aplicación responda a los eventos clave del ciclo de vida del componente.

Decorator Directives

Las directivas decoradoras amplían el comportamiento de un elemento HTML existente o de un componente existente. Este es el tipo más simple de directivas. Realizan pequeños conjuntos de acciones, pero a veces estas pequeñas características son críticas para el negocio. Una directiva decoradora puede interactuar con su host a través de eventos. El uso eficiente de estos eventos reduce la cantidad de manipulación del DOM que se necesita realizar.

Directivas estructurales

Las directivas estructurales se ocupan de la plantilla representada dentro de un elemento. Pueden manipular la plantilla, dependiendo de la necesidad. No manipula el DOM dentro del destino directamente, sino que usa el servicio ViewComponentRef proporcionado por Angular para agregar o quitar elementos dentro del destino. Este comportamiento hace que la plataforma directiva sea independiente.

Change Detection

En el corazón de cada marco de front-end se encuentra una técnica para detectar los cambios realizados en los objetos. Siempre que los valores de los objetos estén enlazados en el cambio de la interfaz de usuario, se debe notificar al marco para que pueda actualizar la interfaz de usuario para reflejar estos cambios. Esta técnica se denomina detección de cambios. Angular aporta una forma mucho más potente y eficiente de detectar cambios en los objetos. Viene con un mecanismo de detección de cambios incorporado y permite que las aplicaciones creadas en el marco también utilicen una técnica de terceros. El marco tiene un extremo abierto que permite el uso de objetos que proporcionan un mejor mecanismo para detectar cambios.

Servicios

Los servicios son clases simples de ES6 o TypeScript que realizan una operación como obtener datos de una API, mantener un WebSocket conectándose para interactuar con el servidor, manejar la lógica de negocios o cualquier lógica reutilizable. Un servicio se puede inyectar en otro servicio, un componente, una directiva o cualquier bloque de código Angular. Los servicios ayudan a lograr el Principio de Responsabilidad Única (SRP) y a mantener el código más limpio.

Formularios

Aceptar las entradas del usuario es una de las partes más esenciales de cualquier aplicación. A veces, se convierte en un desafío manejar las entradas del usuario cuando la empresa necesita que el usuario complete muchos campos y tiene muchas validaciones que realizar. Angular proporciona un buen soporte para Forms. Formulario de una aplicación Angular que puede ser controlado por una plantilla o por un modelo.

Enrutamiento

El marco que admite el desarrollo de aplicaciones de una sola página permite cambiar las vistas en el lado del cliente sin actualizar toda la página. Actualiza una parte de la página y cambia la URL para que uno pueda marcarla como favorita y volver a la vista específica en lugar de comenzar la navegación de nuevo desde la primera página. Esto se denomina enrutamiento del lado del cliente. Como todos los marcos de SPA, Angular admite el enrutamiento. Angular tiene un router llamado Component Router, que se llama así porque carga componentes.

Modules

Como se mencionó anteriormente, los módulos de Angular se utilizan para agrupar un conjunto de componentes, directivas, tuberías y servicios relacionados. Angular sistema de módulos es diferente del sistema de módulos ES6. El sistema de módulos ES6 encapsula el contenido de un archivo y el sistema de módulos Angular 2 encapsula un conjunto de bloques Angular. Estas son algunas de las características de un módulo:

• Los bloques añadidos a un módulo se pueden utilizar dentro del módulo.
• Un módulo puede importar uno o más módulos para usar el código de ese módulo.
• Una biblioteca de Angular puede hacer uso de un módulo para exportar su funcionalidad al resto del mundo.
• Una aplicación Angular arranca con un módulo.
• Un módulo puede declarar uno o más de sus componentes como componentes de arranque.
• La ejecución del módulo comenzará con el componente bootstrapped.

Conclusión

Angular viene con una serie de características nuevas, así como versiones mejoradas de algunas características de Angular JS. Cada una de estas características está diseñada teniendo en cuenta la facilidad de uso y la facilidad de mantenimiento. Profundizaremos en cada uno de estos conceptos a medida que avancemos.

Esperamos que hayas disfrutado de esta muestra del libro electrónico de Angular Essentials. Puede descargar el libro completo y asegúrese de consultar nuestra nueva aplicación de muestra y las lecciones que demuestran cómo aplicar la información que acaba de aprender, así como cómo Ignite UI para los componentes de Angular de JavaScript puede ayudarlo a escribir aplicaciones increíbles de alto rendimiento para cualquier aplicación de línea de negocio. ¡Y asegúrese de obtener su prueba gratuita de 30 días de Ignite UI para JavaScript!