Angular CLI (Command Line Interface) es una herramienta poderosa que facilita la creación, desarrollo y mantenimiento de aplicaciones Angular. Proporciona comandos que permiten automatizar tareas comunes, como la creación de componentes, servicios, módulos, y la construcción y despliegue de la aplicación.

• Entender qué es Angular CLI y su importancia.
• Aprender a instalar Angular CLI.
• Familiarizarse con los comandos básicos de Angular CLI.
• Crear y gestionar proyectos Angular utilizando Angular CLI.

Angular CLI es una herramienta de línea de comandos que simplifica el desarrollo de aplicaciones Angular. Proporciona una serie de comandos que permiten:

• Crear nuevos proyectos Angular.
• Generar componentes, servicios, módulos y otros elementos.
• Ejecutar la aplicación en un servidor de desarrollo.
• Construir la aplicación para producción.
• Ejecutar pruebas unitarias y de extremo a extremo.

Para instalar Angular CLI, necesitas tener Node.js y npm (Node Package Manager) instalados en tu sistema. Puedes descargar Node.js desde nodejs.org.

Una vez que tengas Node.js y npm instalados, puedes instalar Angular CLI globalmente usando el siguiente comando:

Para verificar que Angular CLI se ha instalado correctamente, puedes ejecutar:

Este comando mostrará la versión de Angular CLI instalada, junto con las versiones de Angular y otros paquetes relacionados.

Para crear un nuevo proyecto Angular, utiliza el comando ng new seguido del nombre del proyecto:

Este comando te guiará a través de una serie de preguntas para configurar el proyecto, como si deseas incluir Angular Routing y qué estilo de hoja de estilos prefieres (CSS, SCSS, etc.).

Para ejecutar la aplicación en un servidor de desarrollo, navega al directorio del proyecto y ejecuta:

Por defecto, la aplicación estará disponible en http://localhost:4200/. Puedes cambiar el puerto utilizando la opción --port:

Angular CLI permite generar componentes, servicios, módulos y otros elementos utilizando el comando ng generate (o su alias ng g).

Generar un Componente

Generar un Servicio

Generar un Módulo

Para construir la aplicación para producción, utiliza el comando ng build. Este comando compila la aplicación y optimiza los archivos para su despliegue.

Los archivos generados estarán en el directorio dist/.

Pruebas Unitarias

Para ejecutar pruebas unitarias, utiliza el comando:

Pruebas de Extremo a Extremo

Para ejecutar pruebas de extremo a extremo, utiliza el comando:

Vamos a crear un proyecto Angular simple y generar un componente utilizando Angular CLI.

1. Crear un Nuevo Proyecto:

   ng new mi-proyecto
   

2. Navegar al Directorio del Proyecto:

   cd mi-proyecto
   

3. Servir la Aplicación:

   ng serve
   

4. Generar un Componente:

   ng generate component mi-componente
   

   Esto creará un nuevo componente llamado mi-componente en el directorio src/app/mi-componente/.

5. Modificar el Componente:

   Abre el archivo src/app/mi-componente/mi-componente.component.ts y modifica el contenido del componente:

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-mi-componente',
     template: `<h1>Hola, Angular CLI!</h1>`,
     styles: [`h1 { color: blue; }`]
   })
   export class MiComponenteComponent { }
   

6. Incluir el Componente en la Aplicación Principal:

   Abre el archivo src/app/app.component.html y añade el selector del nuevo componente:

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

7. Verificar en el Navegador:

   Abre http://localhost:4200/ en tu navegador y deberías ver el mensaje "Hola, Angular CLI!" en azul.

Angular CLI es una herramienta esencial para cualquier desarrollador Angular. Facilita la creación y gestión de proyectos, automatiza tareas comunes y mejora la eficiencia del desarrollo. En esta sección, hemos cubierto los conceptos básicos de Angular CLI, desde la instalación hasta la creación y gestión de proyectos. Con esta base, estarás mejor preparado para aprovechar al máximo las capacidades de Angular CLI en tus proyectos.

En la siguiente sección, exploraremos las mejores prácticas para mantener y desplegar aplicaciones Angular, asegurando que tu código sea de alta calidad y seguro.