¿Como funciona angular?

Angular es un Framework de Javascript y tiene la gran ventaja que introduce todas las tecnologías que vas a necesitar para el desarrollo de una plataforma web, además de que la forma en como funciona es a través de servicios, imagina que cada que deseas obtener información de un API lo guardas en un archivo y si agregas, actualizas o eliminas simplemente actualizas ese archivo, entonces todos los componentes, vistas y los mismos servicios pueden acceder a el desde donde sea.

Solo basta suscribirse para saber que pasa con esa información y tendrás acceso a esa data, sin necesidad de dar vueltas o tener los problemas que suponía trabajar con el estado en el caso de React JS(tiene otras ventajas).

Otra de las grandes ventajas que tiene la funcionalidad de Angular es que podemos separar los estilos, html, métodos y servicios en diferentes archivos, es decir no tenemos todo revuelto lo que hace que mantengamos un desarrollo administrable y mantenerle.

De tal forma que existen 2 formas de trabajar con angular, quizá tengamos 3 pero las mas apegadas a la arquitectura de angular son las primeras dos, empecemos con la primera, donde tenemos cada código en su archivo, de modo que tenemos desacoplado, el html5, estilos, metodos del componente, pruebas en 4 archivos diferentes, esta es la forma en que angular te propone trabajar, ya que si utilizas cli para generar los componentes, algo como:

Te generara 4 archivos:

• .html
• .css
• .ts
• .spec.ts

Esta es la forma que sugiero que trabajes si vas empezando o si quieres seguir buenas practicas, tener el código desacoplado te ayudara a mantener un código mas limpio, además que podrás documentarlo de una forma mas sencilla.

También tenemos la 2nda forma, esta es un poco mas austera, ya que todo el código se concentra en un archivo, tanto el html, estilos y métodos del componente, el único archivo que queda fuera son las pruebas.

No me mal entiendas, eso no quiere decir que este mal hacerlo, ya que si no angular no lo permitiera, esta forma de trabajar esta mas orientado cuando tienes un componente muy pequeño o simple, donde el html no involucra un tamaño de código mayor a 15 o 20 líneas, es decir, que es fácil interpretarlo.

Aunado a eso, el código css, también debe ser muy sencillo, cuestión de 2 o 3 clases muy sencillos, ahí es donde esta forma de estructurar es muy buena, tendrás 2 archivos, un del componente y otro para probar.

Como te dije al principio, existe una tercera forma y es que angular permite tener una sección especifica para estilos, ya sea scss, less o css, ahí puedes construir los estilos generales de la plataforma, aquí es donde puedes generar un tema, y podrás utilizar esas clases en el html, por lo que el archivo de estilos del componente puede desaparecer, claro ya se comportaría a algo como bootstrap, pero no deja de ser atractivo.

En fin ahora sabes como funciona angular, como se estructura y cuales son las formas de trabajar, claro vamos empezando, pero con esto sabrás como puedes trabajar y como empezar, angular no es solo una biblioteca, por lo que su forma de trabajar no la aprenderás en un día o dos, al ser un framework, hay formas que te permitirán tener una estructura solida y que será tan simple que cuando la tengas dominada, créeme podrás crear plataformas en tiempo record y sobre todo testeada y sin problemas de integridad, o complicaciones en términos de mantenimiento.

Como sabes siempre me gusta dejar un video para que pueda ilustrarte un poco mas, además que si te queda alguna duda, el video te sea de ayuda.