Angular 10 Tutorial #4 - Install Angular CLI | Angular 10 Tutorial For Beginners
Instalación de Angular CLI y Creación de Aplicaciones
Introducción a Angular 10
- Bienvenida a la serie de tutoriales sobre Angular 10, dirigida a principiantes. Se enfatiza la importancia de codificar junto al instructor para un aprendizaje efectivo.
- El presentador, Sridhar, menciona que este es el cuarto episodio de la serie y que ha planeado alrededor de 100 tutoriales. Se proporcionarán notas y código en un enlace de GitHub.
Requisitos Previos
- Se revisan los requisitos básicos para trabajar con Angular: un sistema operativo (Windows, Mac, Linux), Node.js como entorno de ejecución para JavaScript y npm (Node Package Manager).
- Es necesario tener un editor de código preferido como Visual Studio Code o Sublime Text.
Verificación del Entorno
- Instrucciones para verificar las versiones instaladas: ejecutar
node -vynpm -ven la terminal.
- Se explica que Angular CLI se instalará globalmente usando el comando
npm install -g @angular/cli, lo que permite su uso en diferentes rutas del sistema.
Instalación de Angular CLI
- Definición del término CLI (Interfaz de Línea de Comandos), que facilita la ejecución de comandos en la terminal para generar código rápidamente.
- Instrucciones sobre cómo abrir la terminal en Visual Studio Code utilizando el atajo Ctrl + ` (backtick).
Ejecución del Comando para Instalar Angular
- Confirmación sobre cómo verificar las versiones antes de proceder con la instalación: ejecutar nuevamente
node -vynpm -v.
- Procedimiento detallado para instalar Angular CLI mediante el comando mencionado anteriormente.
Creación del Proyecto Angular
- Una vez instalado, se crea un nuevo proyecto ejecutando el comando
ng new nombre_del_proyecto. El presentador opta por crear una herramienta CRM llamada "simple crm".
- Durante el proceso, se le pregunta al usuario si desea agregar routing y qué formato CSS utilizar; se selecciona SCSS como opción preferida.
Generación Automática del Proyecto
¿Cómo iniciar una aplicación Angular?
Generación y configuración de la aplicación
- Se está generando todo el código necesario para la aplicación, incluyendo todos los end-to-end (e2e). Se espera que la instalación de paquetes se complete pronto.
- En el próximo episodio, se explicará la estructura de carpetas del proyecto Angular, detallando el propósito de cada archivo y su impacto en el funcionamiento general.
- Es importante tener paciencia al trabajar con Angular o cualquier framework web moderno, especialmente si eres principiante.
Compilación y ejecución de la aplicación
- La aplicación ha sido inicializada correctamente y todos los paquetes han sido instalados exitosamente. Ahora se procederá a ejecutar la aplicación usando el comando
ng serve.
- Para ejecutar la aplicación, primero hay que navegar a la carpeta del proyecto "simple crm" antes de ejecutar
ng serve.
- Al compilar por primera vez, puede tardar un poco más; sin embargo, las compilaciones futuras deberían ser más rápidas debido a cachés.
Verificación del estado de la aplicación
- Una vez compilada, se puede acceder a la aplicación en el puerto predeterminado 4200. Si no hay errores durante la compilación, se verá un mensaje indicando que el servidor está escuchando en localhost:4200.
- Cuando accedemos a
localhost:4200, deberíamos ver nuestra aplicación "simple crm" funcionando correctamente. Esto indica que hemos completado con éxito nuestro primer proyecto en Angular.
Próximos pasos
- Felicitaciones por haber iniciado tu primera aplicación en Angular 10. En el siguiente episodio se explorarán detalles sobre cada carpeta y archivo del proyecto.