En esta sección, aprenderás a crear tu primera aplicación Angular desde cero. Este proceso te ayudará a familiarizarte con las herramientas y el flujo de trabajo básico de Angular.

• Configurar un nuevo proyecto Angular.
• Comprender la estructura de un proyecto Angular.
• Crear y ejecutar una aplicación Angular básica.

• Tener Node.js y npm instalados en tu sistema.
• Tener Angular CLI instalado.

Angular CLI (Command Line Interface) es una herramienta poderosa que facilita la creación y gestión de proyectos Angular. Si aún no la tienes instalada, puedes hacerlo con el siguiente comando:

Para crear un nuevo proyecto, utiliza el comando ng new seguido del nombre de tu proyecto. Por ejemplo, para crear un proyecto llamado my-first-app:

Durante la creación del proyecto, Angular CLI te hará algunas preguntas:

• Would you like to add Angular routing? (¿Te gustaría agregar enrutamiento de Angular?) - Responde y (yes) o n (no) según tu preferencia.
• Which stylesheet format would you like to use? (¿Qué formato de hoja de estilos te gustaría usar?) - Puedes elegir entre CSS, SCSS, SASS, LESS, etc.

Una vez creado el proyecto, navega al directorio del proyecto:

Para ejecutar la aplicación, utiliza el siguiente comando:

Este comando compilará la aplicación y la servirá en un servidor de desarrollo. Por defecto, estará disponible en http://localhost:4200/.

Al crear un nuevo proyecto Angular, se genera una estructura de directorios y archivos. A continuación, se describen los más importantes:

• e2e/: Contiene pruebas de extremo a extremo.
• node_modules/: Contiene las dependencias del proyecto.
• src/: Contiene el código fuente de la aplicación.
  • app/: Contiene los componentes, servicios y otros módulos de la aplicación.
  • assets/: Contiene recursos estáticos como imágenes y archivos.
  • environments/: Contiene configuraciones específicas para diferentes entornos (desarrollo, producción).
• angular.json: Archivo de configuración del proyecto Angular.
• package.json: Archivo de configuración de npm que incluye las dependencias del proyecto.
• tsconfig.json: Archivo de configuración de TypeScript.

El componente principal de la aplicación se encuentra en src/app/app.component.ts. Puedes modificar el archivo de plantilla app.component.html para cambiar el contenido que se muestra en la página principal.

Por ejemplo, abre src/app/app.component.html y reemplaza su contenido con:

Guarda los cambios y vuelve a tu navegador. Deberías ver el mensaje "¡Hola, Mundo!" en la página principal de tu aplicación.

1. Abre src/app/app.component.ts y cambia el título de la aplicación.
2. Modifica src/app/app.component.html para incluir un nuevo mensaje de bienvenida.
3. Agrega algunos estilos personalizados en src/app/app.component.css.

Solución

1. En app.component.ts, cambia la propiedad title:

2. En app.component.html, agrega un nuevo mensaje:

3. En app.component.css, agrega algunos estilos:

• Error Común: Asegúrate de que el servidor de desarrollo esté ejecutándose (ng serve). Si realizas cambios y no los ves reflejados, verifica que el servidor esté activo.
• Consejo: Utiliza la consola del navegador para depurar errores. Angular proporciona mensajes de error detallados que pueden ayudarte a identificar y solucionar problemas rápidamente.

¡Felicidades! Has creado y personalizado tu primera aplicación Angular. Ahora tienes una comprensión básica de cómo configurar y ejecutar un proyecto Angular. En el próximo módulo, profundizaremos en los conceptos básicos de TypeScript, que es el lenguaje de programación utilizado por Angular.