Explorando los Fundamentos de Angular: Part 1

Indice

1. Introducción
2. ¿Qué es Angular?
3. Configuración del ambiente
4. Estructura Proyecto
5. Proyecto: creación
6. Conclusión
7. Autor

Introducción

Angular es un framework de aplicaciones web de código abierto basado en TypeScript, liderado por el equipo de Angular en Google y respaldado por una comunidad de individuos y empresas. Angular es un rewrite completo del mismo equipo que construyó AngularJS.

Angular ha ganado una gran popularidad en el mundo del desarrollo web gracias a su robustez, escalabilidad y el respaldo de Google. Es ampliamente utilizado en la industria y sigue siendo una opción preferida para el desarrollo de aplicaciones web modernas y dinámicas. A lo largo de este curso en formato texto exploraras los fundamentos de angular en su versión 17

¿Qué es Angular?

Angular es una plataforma de desarrollo y framework. Una plataforma de desarrollo proporciona una gama de herramientas integradas para ayudar a escribir, previsualizar y desplegar tus proyectos. Un framework es una estructura sobre la que puedes construir y personalizar, lo que nos permite codificar mucho más rápido y enfocarte de inmediato en lo que hace única a tu aplicación.

Según Geek for Geeks, "un framework es una estructura para el proceso de desarrollo con la ayuda de un framework, puedes evitar escribir todo desde cero".

Tres grandes beneficios de Angular son:

• Versatilidad: Puedes construir cualquier cosa, desde aplicaciones simples hasta sistemas más grandes y complejos. Angular proporciona la flexibilidad necesaria para adaptarse a diferentes escalas de proyectos.
• Eficiencia en el desarrollo: Gracias a sus herramientas integradas y su arquitectura bien pensada, puedes desarrollar más rápido y con menos errores. Angular simplifica tareas comunes y promueve las mejores prácticas de desarrollo.
• Comunidad y soporte: Angular se mantiene activamente con actualizaciones regulares y tiene una gran comunidad de desarrolladores. Además, al ser creado por Google, cuenta con un respaldo sólido. Es utilizado por miles de marcas exitosas, desde Xbox hasta HBO y BMW, lo que demuestra su confiabilidad y capacidad para manejar proyectos de gran envergadura.

Configuración del ambiente

Para instalar en tu sistema local, primero necesitas tener Node.js y npm instalados. Luego, para trabajar con Angular, es necesario instalar Angular CLI (Interfaz de Línea de Comandos de Angular), que se utiliza para realizar diversas operaciones, como crear y ejecutar aplicaciones, probar y desplegar.

Para instalar Angular CLI, ejecuta el siguiente comando dentro de tu terminal (ya sea cmd en Windows o consola bash en sistemas Unix):

Crear una nueva aplicación Para crear una nueva aplicación necesitamos usar el comando ng new noteMaster esto creara todos los archivos y carpetas para nuestra aplicación angular.

Para ejecutar nuestro proyecto necesitamos navegar hasta la carpeta del proyecto y ejecutar ng serve --open

Estructura de archivos

Los proyectos en angular están compuestos por varios archivos en esta sección vamos a explorar la estructura de los archivos de una proyecto angular}

Los archivos fuente residen en el subdirectorio src/.

• index.html es el HTML principal de la aplicación.
• main.ts es el punto de entrada de tu aplicación y se ejecuta cuando se lanza tu aplicación.
• styles.css es el archivo CSS principal, que incluye los estilos para tu aplicación.

La carpeta app incluye como archivos principales a: app.component.ts y app.component.html Representan el Componente Raíz de nuestro proyectos.

Proyecto: creación

Adelante abre el proyecto y explora la estructura del proyecto en el que trabajaremos en este curso. Así mismo podría crear tu propio proyecto, en el siguiente módulo agregaras funcionalidad continua...

En esta sesión, exploraremos cómo crear un nuevo proyecto en Angular utilizando Angular CLI. Angular CLI (Command Line Interface) es una poderosa herramienta que facilita la creación, administración y desarrollo de aplicaciones Angular.

Pasos para la creación del proyecto:

1. Clonar el repositorio: Antes de comenzar, clona el repositorio del proyecto desde el siguiente enlace: Repositorio del proyecto

2. Instalar las dependencias: Una vez clonado el repositorio, accede al directorio del proyecto en tu terminal y ejecuta el siguiente comando para instalar todas las dependencias necesarias:

   npm install

3. Levantar el servidor de desarrollo: Una vez que todas las dependencias estén instaladas, puedes iniciar el servidor de desarrollo de Angular con el siguiente comando:

   ng serve --open

   Este comando compilará la aplicación y la ejecutará en un servidor local. Luego, podrás acceder a la aplicación en tu navegador utilizando la dirección http://localhost:4200/.

¡Ahora estás listo para comenzar a desarrollar tu aplicación Angular! Si tienes alguna pregunta o necesitas ayuda, no dudes en consultar la documentación oficial de Angular o dejar un comentario en el repositorio del proyecto o del blog.

Conclusión

En resumen, esta primera parte nos ha introducido al mundo de Angular, un framework de aplicaciones web de código abierto respaldado por Google y una comunidad activa de desarrolladores. Hemos explorado los conceptos fundamentales de Angular, comprendiendo su versatilidad como plataforma de desarrollo y su eficiencia en la construcción de aplicaciones web dinámicas. Ahora estamos listos para continuar explorando y construyendo aplicaciones web increíbles con Angular. ¡Sigamos adelante con este emocionante aprendizaje!

Autor

Ing. Cristhian Jumbo C.

Desarrollador de Software,

Especialista en Desarrollo web

Cristhian Jumbo

Explora más temas

• angular
• typescript
• angular 17
• curso