En esta sección, aprenderás a crear tu primera aplicación Angular desde cero. Este proceso te ayudará a familiarizarte con la estructura básica de un proyecto Angular y a entender cómo se integran los diferentes componentes y módulos.

• Crear un nuevo proyecto Angular utilizando Angular CLI.
• Comprender la estructura de un proyecto Angular.
• Ejecutar la aplicación en un servidor de desarrollo.
• Realizar cambios básicos en la aplicación.

• Tener Node.js y npm instalados en tu sistema.
• Tener Angular CLI instalado. Si no lo tienes, puedes instalarlo con el siguiente comando:

  npm install -g @angular/cli
  

1. Abrir la Terminal o Símbolo del Sistema: Abre tu terminal o símbolo del sistema y navega hasta el directorio donde deseas crear tu nuevo proyecto Angular.

2. Crear el Proyecto: Utiliza el siguiente comando para crear un nuevo proyecto Angular:

   ng new my-first-angular-app
   

   • my-first-angular-app es el nombre de tu proyecto. Puedes cambiarlo por el nombre que prefieras.
   • Durante la creación, Angular CLI te hará algunas preguntas sobre la configuración del proyecto. Puedes aceptar las opciones predeterminadas presionando Enter.

3. Navegar al Directorio del Proyecto: Una vez que el proyecto se haya creado, navega al directorio del proyecto:

   cd my-first-angular-app
   

Una vez que el proyecto se ha creado, es importante entender la estructura de archivos y carpetas generada por Angular CLI.

• src/: Contiene el código fuente de la aplicación.

  • app/: Contiene los componentes, servicios y otros módulos de la aplicación.
  • assets/: Carpeta para almacenar recursos estáticos como imágenes y archivos.
  • environments/: Contiene archivos de configuración para diferentes entornos (desarrollo, producción).
  • index.html: Archivo HTML principal de la aplicación.
  • main.ts: Punto de entrada principal de la aplicación.
  • styles.css: Archivo de estilos globales.

• angular.json: Archivo de configuración del proyecto Angular.

• package.json: Archivo de configuración de npm que lista las dependencias del proyecto.

Para ejecutar la aplicación en un servidor de desarrollo, utiliza el siguiente comando:

Este comando compilará la aplicación y la servirá en http://localhost:4200/. Abre tu navegador y navega a esta URL para ver tu aplicación en funcionamiento.

Vamos a realizar algunos cambios básicos en la aplicación para entender cómo funciona.

1. Abrir el Proyecto en un Editor de Código: Abre el proyecto en tu editor de código favorito (por ejemplo, Visual Studio Code).

2. Modificar el Componente Principal: Abre el archivo src/app/app.component.html y realiza algunos cambios. Por ejemplo, puedes cambiar el contenido del archivo a:

   <h1>¡Hola, Mundo!</h1>
   <p>Esta es mi primera aplicación Angular.</p>
   

3. Guardar y Ver los Cambios: Guarda el archivo y vuelve a tu navegador. Deberías ver los cambios reflejados automáticamente gracias a la recarga en caliente proporcionada por Angular CLI.

1. Objetivo: Personalizar el componente principal (AppComponent) para que muestre un mensaje de bienvenida personalizado y una lista de tus tecnologías favoritas.

2. Pasos:

   • Abre el archivo src/app/app.component.ts y añade una propiedad tecnologias en la clase AppComponent:

     export class AppComponent {
       title = 'my-first-angular-app';
       tecnologias = ['Angular', 'TypeScript', 'HTML', 'CSS'];
     }
     

   • Modifica el archivo src/app/app.component.html para mostrar el mensaje de bienvenida y la lista de tecnologías:

     <h1>¡Bienvenido a mi primera aplicación Angular!</h1>
     <p>Estas son algunas de mis tecnologías favoritas:</p>
     <ul>
       <li *ngFor="let tecnologia of tecnologias">{{ tecnologia }}</li>
     </ul>
     

3. Resultado Esperado: Al guardar los cambios y recargar la página, deberías ver un mensaje de bienvenida y una lista de tecnologías.

En esta sección, has aprendido a crear tu primera aplicación Angular, comprender la estructura del proyecto, ejecutar la aplicación en un servidor de desarrollo y realizar cambios básicos. Estos conocimientos te proporcionan una base sólida para continuar explorando y desarrollando aplicaciones más complejas con Angular.

En el próximo módulo, profundizaremos en los componentes de Angular, que son los bloques de construcción fundamentales de cualquier aplicación Angular. ¡Vamos allá!