Introducción
Una vez completada la configuración del entorno de desarrollo, estamos listos para crear nuestra primera aplicación Angular.
Para ello utilizaremos Angular CLI, la herramienta oficial de Angular que nos permite realizar las tareas más comunes durante el desarrollo, tales como:
Crear proyectos.
Generar componentes y servicios.
Ejecutar la aplicación en modo desarrollo.
Compilar el proyecto.
Actualizar versiones de Angular.
Generar versiones para producción.
Angular CLI será una de las herramientas más importantes que utilizaremos a lo largo del curso.
Abrir una terminal
Antes de crear el proyecto, necesitamos abrir una interfaz de línea de comandos.
Opción 1: CMD
En Windows:
Presiona Windows + R.
Escribe:
cmd
Presiona Enter.
Opción 2: PowerShell
También puedes abrir PowerShell directamente desde una carpeta:
Mantén presionada la tecla Shift.
Haz clic derecho sobre la carpeta donde deseas crear el proyecto.
Selecciona:
Open PowerShell Window Here
o la opción equivalente disponible en tu versión de Windows.
Ambas alternativas son válidas. En este curso se utilizará CMD, aunque puedes trabajar con la terminal que prefieras.
Navegar a la carpeta de trabajo
Una vez abierta la terminal, desplázate hacia el directorio donde almacenarás tus proyectos.
Por ejemplo:
cd Ruta\De\Tus\Proyectos
Asegúrate de ubicarte en la carpeta donde deseas crear la aplicación Angular.
Crear el proyecto
Para generar una nueva aplicación Angular ejecuta el siguiente comando:
ng new angular-peliculas
Angular CLI comenzará a realizar algunas preguntas de configuración.
Selección de hojas de estilo
Cuando se solicite el formato de estilos, selecciona:
CSS
En este curso utilizaremos CSS como lenguaje de estilos.
Server-Side Rendering (SSR)
Angular también preguntará si deseas habilitar Server-Side Rendering (SSR) o renderizado del lado del servidor.
Selecciona:
No
ya que esta funcionalidad no será utilizada durante el curso.
Instalación de dependencias
Después de responder las preguntas de configuración, Angular CLI procederá a:
Crear la estructura del proyecto.
Generar los archivos iniciales.
Descargar e instalar las dependencias necesarias mediante npm.
Durante este proceso se creará una carpeta llamada:
angular-peliculas
que contendrá todo el código de la aplicación.
Este procedimiento puede tardar varios minutos dependiendo de la velocidad del equipo y de la conexión a Internet.
Abrir el proyecto en Visual Studio Code
Una vez finalizada la creación del proyecto, navega hacia la carpeta generada:
cd angular-peliculas
Y abre el proyecto con Visual Studio Code mediante:
code .
Explicación del comando
code abre Visual Studio Code.
. indica la carpeta actual.
Como resultado, Visual Studio Code abrirá directamente el proyecto Angular recién creado.
Confirmar la confianza del proyecto
La primera vez que abras el proyecto, Visual Studio Code puede mostrar un mensaje preguntando si confías en los archivos de la carpeta.
Selecciona:
Yes, I trust the authors
o la opción equivalente.
Esto permitirá que Visual Studio Code habilite todas sus funcionalidades para el proyecto.
Instalar Angular Language Service
Para mejorar la experiencia de desarrollo es recomendable instalar la extensión Angular Language Service.
Instalación
Abre la sección Extensions de Visual Studio Code.
Busca:
Angular Language Service
Haz clic en Install.
Beneficios
Esta extensión proporciona funcionalidades como:
IntelliSense.
Autocompletado avanzado.
Validación de plantillas Angular.
Navegación de componentes.
Detección temprana de errores.
Gracias a ella, el desarrollo de aplicaciones Angular resulta mucho más cómodo y productivo.
Abrir una terminal en Visual Studio Code
Visual Studio Code incorpora una terminal integrada que evita tener que cambiar constantemente entre el editor y una ventana externa.
Para abrirla puedes:
Desde el menú
Terminal → New Terminal
Mediante atajo de teclado
Ctrl + `
(La tecla ubicada normalmente debajo de Escape).
Ejecutar la aplicación
Con la terminal abierta dentro de la carpeta del proyecto, ejecuta:
ng serve -o
¿Qué hace este comando?
Compila la aplicación Angular.
Inicia un servidor de desarrollo local.
Observa los cambios realizados en el código.
Abre automáticamente el navegador.
El parámetro:
-o
proviene de open y hace que Angular abra automáticamente el navegador cuando la aplicación esté lista.
Verificar el servidor de desarrollo
Después de algunos segundos Angular mostrará un mensaje similar a:
Local: http://localhost:4200/
Esta dirección indica dónde se encuentra ejecutándose nuestra aplicación.
Dirección por defecto
http://localhost:4200
localhost hace referencia a nuestra computadora local.
4200 es el puerto predeterminado utilizado por Angular.
Visualizar la aplicación
Si todo ha funcionado correctamente, el navegador se abrirá automáticamente y mostrará la página inicial de Angular.
Aunque todavía no hemos desarrollado ninguna funcionalidad, esta pantalla confirma que:
Angular está instalado correctamente.
Angular CLI funciona adecuadamente.
Node.js está configurado correctamente.
El proyecto se creó sin errores.
En otras palabras, nuestro entorno está listo para comenzar a desarrollar la aplicación.
Resumen
En este capítulo creamos nuestra primera aplicación Angular utilizando Angular CLI.
Los comandos utilizados fueron:
Crear el proyecto
ng new angular-peliculas
Entrar a la carpeta
cd angular-peliculas
Abrir en Visual Studio Code
code .
Ejecutar la aplicación
ng serve -o
Al finalizar, pudimos acceder a la aplicación mediante:
http://localhost:4200
Con esto hemos creado y ejecutado exitosamente nuestro primer proyecto Angular. En el próximo capítulo exploraremos la estructura de archivos generada por Angular CLI y comprenderemos el propósito de cada uno de los elementos que componen el proyecto.
