Angular es un framework muy popular para front ends en aplicaciones web y móviles. Junto a Angular Cli, que es su Interfaz de comandos, su curva de aprendizaje es más corta que otros frameworks del estilo, su desarrollo es más ágil debido a la cantidad de comandos que podemos utilizar.

Angular está basado en componentes, lo que significa que desacopla todo el código haciendo más sencilla su interacción. Por así decirlo, para Angular un componente puede ser cualquier cosa. Si tomamos como ejemplo un archivo html podemos encontrar una cabecera (Header), pie de página (footer), un menú lateral (Sidebar), menú de navegación (navbar) etc. Cada una de estas partes es un componente independiente para Angular.

Si tomamos como ejemplo la siguiente imagen podremos hacernos una idea como se estructura un componente:

Componentes en Angular ejemplo de código

Sin entrar en muchos detalles nos centraremos en los siguientes archivos app.component.css, app.component.html y app.component.ts.

  • nombre.component.css – Archivo de estilos del componente.
  • nombre.component.html – Estructura html del componente.
  • nombre.component.ts – Lógica del componente.

Angular: versatilidad y eficiencia

Por tanto, podemos deducir que cada componente tendrá un archivo especifico para sus configuración, estilo y sus funcionalidades. De esta manera, si nos organizamos bien podemos conseguir una estructura en código facilmente legible, localizable y reutilizable en otros proyectos de Angular.

Podemos seguir rizando un poco más el rizo, ya que un componente puede a su vez englobar más componentes. Por ejemplo, el componente del footer puede tener un componente que sea un formulario de contacto, y este formulario de contacto a su vez puede contener un componente que sea el botón de enviar. Los componentes entre sí pueden referenciarse fácilmente.

Para crear un componente desde Angular Cli utilizamos el siguiente comando:

ng g c ruta-del-directorio/nombre-del-componente

Ventajas de Angular

  • Un archivo css por cada componente, por tanto a la hora de retocar un estilo es más fácil localizarlo.
  • Un archivo html por cada componente.
  • Funcionalidades por componentes.
  • Escalabilidad.
  • Limpieza en código y estructura.
  • Fácil integración con nuevos proyectos.

¿Prefieres que te echemos un cable?

A veces, ciertas cosas pueden sonar a chino. Estaremos encantados de conocer tu proyecto para darte una solución personalizada.

¡Contáctanos!

¿Te has quedado con ganas de más?

Echa un vistazo a otros posts del blog.
¡Nos esforzamos por crear contenido útil para ti!

¡Ver posts!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *