Descripción general de la arquitectura AngularJS

AngularJS es un marco diseñado para ampliar las capacidades de HTML desde un lenguaje estático simple a un lenguaje intuitivo de datos del lado del cliente más dinámico. AngularJS es 100% JavaScript. Ayuda a escribir un código del lado del cliente más administrado. Le da al desarrollador más control de código y poderes de manipulación de datos en el lado del cliente. Para lograr esto, AngularJS tiene un patrón de diseño adecuado en su lugar. Esto se llama un patrón MVC. Comprendamos más al respecto en la siguiente sección. En este tema, vamos a aprender sobre la arquitectura AngularJS .

La arquitectura

AngularJS se basa en el patrón de diseño MVC. Los principios detrás de la arquitectura MVC están muy bien incorporados en AngularJS. Uno podría haber sabido que MVC es una arquitectura robusta para muchos lenguajes del lado del servidor. AngularJS también amalgamó el patrón MVC en el lado del cliente.

MVC - Modelo, Vista, Controlador

El patrón MVC significa el modelo de controlador de vista de modelo.

  • Modelo

Es el nivel más bajo de la arquitectura. Es responsable de mantener y mantener los datos de la aplicación. Los datos se mantienen durante todo el ciclo de vida de la página y, a veces, incluso entre páginas. El modelo se actualiza a sí mismo según las instrucciones recibidas del controlador.

  • Ver

Una vista es la cara frontal de la aplicación. Es la capa de presentación de la arquitectura responsable de mostrar los datos al usuario. Contiene el código completo para las páginas de la interfaz de usuario en cualquier idioma compatible con el navegador, generalmente HTML. La vista es activada por su controlador respectivo. Una vista envía solicitudes a su controlador en función de la interacción del usuario con la aplicación. El controlador luego regenera la vista en función de la respuesta recibida del servidor.

  • Controlador

Un controlador es el cerebro de procesamiento detrás de la vista y el modelo. Toma las decisiones para generar, regenerar o destruir la vista y el modelo. Todas las operaciones comerciales y las lógicas de código están escritas dentro del controlador. (Algunos desarrolladores prefieren escribir la lógica empresarial en el propio Modelo). El controlador también es responsable de enviar solicitudes al servidor y recibir una respuesta. Luego actualiza la Vista y el Modelo en función de la respuesta. En resumen, el controlador controla todo.

La arquitectura MVC se puede representar gráficamente a través de la imagen a continuación.

MVC es robusto porque se basa en el principio de desarrollo de software de Separación de preocupaciones. Existen varios controladores que operan conjuntos específicos de datos y administran las vistas y modelos respectivos. La lógica de la aplicación se separa de la capa de interfaz de usuario.

MVC en AngularJS

Esto fue todo sobre MVC y sus principios. ¿Cómo se implementan estos principios en AngularJS? Dejanos entender.

  • Alcance : el alcance es el modelo que contiene los datos de la aplicación. Las variables de alcance se adjuntan al DOM y se accede a las propiedades de las variables mediante enlaces.
  • HTML con enlace de datos : la vista en AngularJS no es HTML normal. Es un HTML vinculado a datos. El enlace de datos ayuda a representar datos dinámicos en etiquetas HTML. De esta manera, el modelo actualiza regularmente el DOM.
  • ngController : la directiva ngController es responsable de la colaboración entre el modelo, la vista y la lógica empresarial. La clase de controlador especificada por la directiva ngController controla el alcance y la vista.

Resumen conceptual

Bien, ahora entendemos que AngularJS se basa en la arquitectura MVC. ¿Eso es todo? ¿No hay nada más en juego? Por supuesto que la hay.

Hay algunos conceptos importantes que uno debe comprender para comprender el comportamiento de las aplicaciones de AngularJS. Vamos a entenderlos

  • Plantillas

Las plantillas son los elementos HTML junto con los elementos y atributos específicos de AngularJS. La dinámica en las aplicaciones de AngularJS se logra combinando la plantilla con los datos del modelo y el controlador.

  • Directivas

Las directivas son atributos o elementos que representan un componente DOM reutilizable. Las directivas manipulan directamente el DOM HTML subyacente para representar la vista dinámica. Esto alivia al desarrollador de preocuparse por los elementos y atributos HTML nativos.

  • Enlace de datos bidireccional

AngularJS sincroniza automáticamente los datos entre el modelo y la vista a través del enlace de datos. El modelo se considera como una fuente única de verdad para los datos de su aplicación. La vista es una proyección del modelo en todo momento. Tan pronto como el modelo cambia, la vista cambia y viceversa. Esto se denomina enlace bidireccional. Se logra a través de la compilación en vivo de la plantilla en el navegador.

  • Enrutamiento

Como las aplicaciones de AngularJS son aplicaciones de una sola página (SPA), se pone mucho énfasis en el enrutamiento entre páginas. AngularJS tiene un mecanismo de enrutamiento robusto que hace coincidir las URL de la lista de rutas especificadas en el enrutador asociado con el componente. Esto significa que cada vez que un navegador solicita una URL, se representa un componente secundario asociado en lugar de una página completa.

  • Servicios

Un controlador está acoplado con una vista. Esto significa que es una buena práctica escribir solo ese código dentro del controlador que es lógicamente útil para su vista. La lógica independiente de la vista se puede mover a otro lugar para que otros controladores también puedan reutilizarla.

Aquí vienen los Servicios en acción. Los servicios separan la lógica empresarial reutilizable de la lógica específica de la vista. La lógica específica de la vista reside dentro de los controladores específicos, mientras que la lógica comercial común es compartida por todos los controladores.

Como regla general, el código para acceder a los datos del backend también se escribe en los servicios.

  • Inyección de dependencia

Ahora que hemos movido las lógicas independientes de la vista a una ubicación compartida, ¿cómo controlamos los permisos para acceder a los servicios compartidos? Esto se hace a través de la inyección de dependencia (DI). La inyección de dependencias es un patrón de diseño de software que se ocupa de cómo se crean los objetos y cómo se apoderan de sus dependencias. Todo en AngularJS, desde directivas hasta controladores y servicios y casi todo, está conectado a través de DI.

Dato curioso de la arquitectura AngularJS

AngularJS fue nombrado como AngularJS debido a los corchetes angulares en las etiquetas HTML. El proyecto fue diseñado para hacer HTML más dinámico y amigable con los datos, y por lo tanto, los desarrolladores decidieron nombrarlo después de los corchetes angulares en HTML.

Conclusión - Arquitectura AngularJS

El artículo cubre todos los conceptos importantes de la arquitectura AngularJS. Este es un buen comienzo para comprender el funcionamiento de varios elementos de su aplicación AngularJS. El siguiente paso es crear una aplicación AngularJS multi-controlador totalmente funcional que también recupere datos del backend. Esto le daría una buena práctica práctica sobre los conceptos de AngularJS.

Artículos recomendados

Esta es una guía de la arquitectura AngularJS. Aquí discutimos la arquitectura, MVC en angularjs y Descripción conceptual. También puede consultar nuestros otros artículos sugeridos para obtener más información:

  1. Carrera en AngularJS
  2. Preguntas de la entrevista de AngularJS
  3. ¿Qué es Backbone.js?
  4. Software de minería de datos

Categoría:

Desarrollo de software