Angular
Tutorial Angular: Instalación Angular
Angular instalación y configuración entorno. Sigue una guía paso a paso para instalar y configurar Angular en tu entorno de desarrollo con ejemplos detallados.
Aprende Angular GRATIS y certifícateAngular es un framework de desarrollo de aplicaciones web desarrollado por Google. Ofrece una arquitectura robusta y un conjunto completo de herramientas para construir aplicaciones web de una sola página (SPA, por sus siglas en inglés).
Para comenzar a trabajar con Angular, es necesario realizar algunos pasos de instalación y configuración previos.
Requisitos previos
Instalación de Node.js y npm
Angular requiere Node.js y npm (Node Package Manager) para funcionar.
Si no tienes Node.js instalado en tu sistema, sigue estos pasos:
- Descargar Node.js: Ve al sitio oficial de Node.js y descarga la versión LTS (Long Term Support) recomendada.
- Instalar Node.js: Ejecuta el instalador descargado y sigue las instrucciones en pantalla. Asegúrate de seleccionar la opción que añade Node.js al PATH de tu sistema.
- Verificar la instalación:
- Abre la terminal (símbolo del sistema o PowerShell).
- Ejecuta
node -v
ynpm -v
para verificar que ambas herramientas se hayan instalado correctamente. Deberías ver la versión instalada de Node.js y npm respectivamente.
Actualización de npm
A veces, la versión de npm instalada por defecto puede no ser la más reciente. Para asegurarte de tener la última versión de npm, ejecuta el siguiente comando en la terminal:
npm install -g npm
Instalación de Angular CLI
La Angular CLI (Command Line Interface) es una herramienta que facilita la creación y manejo de proyectos Angular.
Para instalar la Angular CLI globalmente en tu sistema, utiliza el siguiente comando en la terminal:
npm install -g @angular/cli
Para verificar que la instalación fue exitosa, puedes ejecutar:
ng version
Deberías ver información sobre la versión de Angular CLI instalada.
Creación de un nuevo proyecto Angular
Una vez que Angular CLI está instalada, puedes crear un nuevo proyecto Angular fácilmente.
Sigue estos pasos:
- Abrir la terminal: Abre el símbolo del sistema o PowerShell.
- Navegar a la carpeta de trabajo: Usa el comando
cd
para cambiar a la carpeta donde deseas crear tu proyecto. - Crear el proyecto: Ejecuta el siguiente comando reemplazando
nombre-proyecto
con el nombre que desees para tu proyecto:
ng new nombre-proyecto
Seguir las indicaciones: La CLI te hará algunas preguntas sobre la configuración del proyecto. Puedes aceptar las opciones predeterminadas o personalizarlas según tus necesidades.
Navegar al directorio del proyecto:
cd nombre-proyecto
Servir la aplicación
Después de crear tu proyecto Angular, puedes servir la aplicación para verla en tu navegador.
Esto se hace con el siguiente comando:
ng serve
Por defecto, Angular servirá tu aplicación en http://localhost:4200/
. Abre tu navegador y visita esta URL para ver tu aplicación Angular en funcionamiento.
Ejercicios de esta lección Instalación Angular
Evalúa tus conocimientos de esta lección Instalación Angular con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Signals en Angular
Guards funcionales
Decodificar JWT en Angular
Servicio con HttpClient
Ciclo de vida de componentes en Angular
Gestión de productos de Fake Store API
Data binding en Angular
Routes sin módulos en Angular
Router en Angular
Instalación de Angular
Route Guards basados en interfaces
La directiva @if en Angular
Formularios reactivos en Angular
Servicios en Angular
Interceptor funcional
Servicio con Array
La directiva @for en Angular
Interceptores HTTP
Componentes standalone true
Formularios con ngModel en Angular
Routes en Angular
Comunicación entre componentes Angular
Parámetros en rutas con ActivatedRoute
CRUD de Restaurantes y Platos
Tablas en Angular Material
Formulario de registro de usuarios
Instalación y uso de NgBoostrap
Desarrollo de componentes Angular
JWT en Angular
Formularios reactivos en Angular
Formularios en Angular Material
Layout con Angular Material
Effects en Angular
Data binding
HttpClient en servicios de Angular
Desarrollo de módulos Angular
Comandos Angular CLI
Subir archivo en formularios
La directiva routerLink en Angular
Todas las lecciones de Angular
Accede a todas las lecciones de Angular y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Instalación Angular
Introducción Y Entorno
Comandos Angular Cli
Introducción Y Entorno
Desarrollo De Componentes Angular
Componentes
Data Binding En Angular
Componentes
Ciclo De Vida De Componentes En Angular
Componentes
Comunicación Entre Componentes Angular
Componentes
La Directiva @If En Angular
Componentes
La Directiva @For En Angular
Componentes
Componentes Standalone
Componentes
Desarrollo De Módulos Angular
Módulos
Routes En Angular
Enrutado Y Navegación
Router En Angular
Enrutado Y Navegación
La Directiva Routerlink En Angular
Enrutado Y Navegación
Parámetros En Rutas Con Activatedroute
Enrutado Y Navegación
Routes Sin Módulos En Angular
Enrutado Y Navegación
Servicios En Angular
Servicios E Inyección De Dependencias
Httpclient En Servicios De Angular
Servicios E Inyección De Dependencias
Formularios Con Ngmodel En Angular
Formularios
Formularios Reactivos En Angular
Formularios
Subir Archivo En Formularios
Formularios
Layout Con Angular Material
Integración Con Angular Material
Tablas En Angular Material
Integración Con Angular Material
Formularios En Angular Material
Integración Con Angular Material
Instalación Y Uso De Ngboostrap
Integración Con Bootstrap Css
Signals En Angular
Signals Y Reactividad
Effects En Angular
Signals Y Reactividad
Route Guards Basados En Interfaces
Autenticación Y Autorización
Guards Funcionales
Autenticación Y Autorización
Interceptores Http Basados En Interfaz
Autenticación Y Autorización
Interceptores Http Funcionales
Autenticación Y Autorización
Seguridad Jwt En Angular
Autenticación Y Autorización
Decodificar Tokens Jwt En Angular
Autenticación Y Autorización
Certificados de superación de Angular
Supera todos los ejercicios de programación del curso de Angular y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender los requisitos previos para trabajar con Angular.
- Instalar Node.js y npm en el sistema.
- Actualizar npm a su versión más reciente.
- Instalar Angular CLI globalmente.
- Verificar la instalación de Angular CLI.
- Crear un nuevo proyecto Angular usando Angular CLI.
- Servir la aplicación Angular localmente y acceder a ella en el navegador.