¡Bienvenido al mundo de Angular!

En este artículo voy a tratar de explicar todo el contenido que hay en este blog respecto a esta librería para el Frontend.

Logo de Angular

Entendiendo Angular

Lo primero, si acabas de empezar en el desarrollo de webs, antes de que empieces con Angular es necesario que entiendas HTML, CSS y Javascript.

También, si nunca has usado Angular, o si te suena de óidas, te recomiendo que te pases por el artículo de Introducción a Angular en el que explico sus características básicas.

A modo resumen, Angular es un framework para crear páginas web mantenido por Google (aunque es open source) y que cuenta con buena estabilidad y comunidad.

Primeros pasos con Angular

En este punto ya deberías tener instalado Angular y más o menos saber qué contiene cada carpeta del proyecto que se ha generado.

Hecho eso empieza por la creación de Componentes en Angular y sobre todo por Typescript, el lenguaje que se usa en Angular para toda la lógica de los componentes.

Ahora que tienes componentes puedes usar el Sistema de vistas de Angular para pintar los datos del componente en la página web. Para eso quizás necesites conocer el ngOnInit de Angular, una función que permite ejecutar código cuando el componente ha cargado.

Algunas características interesantes de Angular

Entre sus ventajas, destaca la de permitir la Inyección de dependencias en Angular de forma simple en los componentes.

Relacionado con lo anterior tienes también los Servicios en Angular que te permitirán recoger los datos que necesites en el componente para pintarlos en pantalla (por ejemplo todas las llamadas a las APIs)

Otro punto importante, a diferencia de otros frameworks es que Angular te lo da todo de base, no tienes que añadir por ejemplo de forma externa un El router de Angular para poder crear rutas en tu web.

Angular también permite conectar componentes entre sí, lo tienes explicado en el artículo de Comunicación entre componentes en Angular

Angular de forma práctica

Para afianzar los conceptos anteriores he preparado este Ejemplo práctico de web de notas en Angular en el que creamos una web paso a paso siguiendo lo aprendido.

Otro ejemplo práctico muy interesantes es el de Sistema de login para Angular en el que además del formulario, se hace uso de una API para recoger los datos.

Puedes usar el artículo de Seguridad para webs con Angular para complementarlo con el anterior. En este post protegemos ciertas vistas para que solo se puedan acceder bajo ciertas condiciones, como que el usuario haya hecho login o sea admin.

Continúa tu aprendizaje

Con lo aprendido anteriormente ya deberías tener una base sólida de conocimiento, pero todavía hay más por aprender.

Por ejemplo puedes hacer uso de las Pipes de Angular para facilitar el formateado de los datos en las vistas. O el FormControl y FormGroup de Angular, que se usan para el control de los formularios.

La librería de componentes de Angular material 🚧 es importante conocerla porque es una de las más famosas para este framework, permite usar componentes genéricos ya creados con estilo material design.

Por último están los artículos de Testing unitario en Angular con Jasmine, Técnicas de optimización para Angular, Despliege de webs en Angular y Angular avanzado 🚧