Crear una aplicación con Angular CLI - Shell-Bash

En este tutorial aprenderás cómo crear una aplicación web con Angular CLI utilizando la línea de comandos de Shell/Bash.

Paso 1: Instalar Angular CLI

Para crear una aplicación de Angular, necesitarás Angular CLI instalado en tu computadora. Si ya lo tienes instalado, puedes saltarte este paso.

Si utilizas npm como gestor de paquetes, puedes instalar Angular CLI ejecutando el siguiente comando en tu terminal:

npm install -g @angular/cli

Paso 2: Crear una nueva aplicación

Para crear una nueva aplicación de Angular con Angular CLI, debemos ejecutar el siguiente comando en tu terminal:

ng new nombre-de-tu-app

Por ejemplo, si quisieras crear una aplicación llamada "mi-app", ejecuta el siguiente comando:

ng new mi-app

Esto creará una nueva aplicación de Angular con la estructura básica de archivo y configuración preconfigurada.

Paso 3: Correr tu aplicación

Ahora que has creado una aplicación de Angular, puedes iniciar un servidor en tu computadora y verla en tu navegador web. Angular CLI incluye una herramienta de servidor de desarrollo, que puedes iniciar ejecutando el siguiente comando:

cd mi-app
ng serve

Esto iniciará el servidor de desarrollo y podrás acceder a tu aplicación en tu navegador web en la dirección http://localhost:4200/.

Paso 4: Agregar un componente

El siguiente paso es agregar un componente a tu aplicación. Los componentes son bloques de construcción esenciales en Angular y es cómo construyes tus páginas web en Angular.

Para agregar un componente nuevo a tu aplicación, ejecuta el siguiente comando en tu terminal:

ng generate component nombre-de-tu-componente

Por ejemplo, si quisieras agregar un componente llamado "mi-componente", ejecuta el siguiente comando:

ng generate component mi-componente

Esto creará un nuevo directorio mi-componente en la carpeta app y agregará nuevos archivos para tu nuevo componente. Podrás verlos en tu editor de código.

Paso 5: Agregar HTML y CSS a tu componente

Ahora que has creado un componente nuevo, puedes agregar HTML y CSS a él para diseñar tu página web.

Abre tu editor de código y encuentra el archivo mi-componente.component.html en el directorio app/mi-componente. Aquí es donde puedes agregar tu código HTML para tu componente.

<!-- mi-componente.component.html -->

<h1>Mi componente</h1>
<p>Hola, este es mi componente.</p>

Además, puedes agregar código CSS a tu componente. Para hacer esto, encuentra el archivo mi-componente.component.css en el mismo directorio. Aquí es donde puedes agregar el código CSS para estilizar tu componente.

/* mi-componente.component.css */

h1 {
  font-size: 24px;
  color: #333;
}

Paso 6: Usar tu componente

Finalmente, puedes usar tu componente en tu aplicación. Abre el archivo app.component.html y agrega la siguiente línea de código:

<!-- app.component.html -->

<app-mi-componente></app-mi-componente>

Esto agregará tu componente mi-componente a la página web. Guarda tus cambios y regresa a tu navegador web y verás tu nuevo componente.

Conclusión

En este tutorial aprendiste cómo crear, desarrollar y diseñar una aplicación de Angular con Angular CLI utilizando Shell/Bash. Ahora eres capaz de seguir adelante y desarrollar tus propias aplicaciones web con Angular. ¡A trabajar!