Angular

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.

Angular 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:

  1. Descargar Node.js: Ve al sitio oficial de Node.js y descarga la versión LTS (Long Term Support) recomendada.
  2. 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.
  3. Verificar la instalación:
    • Abre la terminal (símbolo del sistema o PowerShell).
    • Ejecuta node -v y npm -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:

  1. Abrir la terminal: Abre el símbolo del sistema o PowerShell.
  2. Navegar a la carpeta de trabajo: Usa el comando cd para cambiar a la carpeta donde deseas crear tu proyecto.
  3. 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.

Certifícate en Angular con CertiDevs PLUS

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

Angular
Puzzle

Guards funcionales

Angular
Test

Decodificar JWT en Angular

Angular
Test

Servicio con HttpClient

Angular
Código

Ciclo de vida de componentes en Angular

Angular
Test

Gestión de productos de Fake Store API

Angular
Proyecto

Data binding en Angular

Angular
Test

Routes sin módulos en Angular

Angular
Código

Router en Angular

Angular
Test

Instalación de Angular

Angular
Puzzle

Route Guards basados en interfaces

Angular
Código

La directiva @if en Angular

Angular
Puzzle

Formularios reactivos en Angular

Angular
Código

Servicios en Angular

Angular
Puzzle

Interceptor funcional

Angular
Test

Servicio con Array

Angular
Código

La directiva @for en Angular

Angular
Puzzle

Interceptores HTTP

Angular
Código

Componentes standalone true

Angular
Puzzle

Formularios con ngModel en Angular

Angular
Puzzle

Routes en Angular

Angular
Test

Comunicación entre componentes Angular

Angular
Test

Parámetros en rutas con ActivatedRoute

Angular
Test

CRUD de Restaurantes y Platos

Angular
Proyecto

Tablas en Angular Material

Angular
Puzzle

Formulario de registro de usuarios

Angular
Proyecto

Instalación y uso de NgBoostrap

Angular
Puzzle

Desarrollo de componentes Angular

Angular
Test

JWT en Angular

Angular
Código

Formularios reactivos en Angular

Angular
Puzzle

Formularios en Angular Material

Angular
Puzzle

Layout con Angular Material

Angular
Puzzle

Effects en Angular

Angular
Test

Data binding

Angular
Código

HttpClient en servicios de Angular

Angular
Puzzle

Desarrollo de módulos Angular

Angular
Puzzle

Comandos Angular CLI

Angular
Puzzle

Subir archivo en formularios

Angular
Test

La directiva routerLink en Angular

Angular
Test

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

Angular

Introducción Y Entorno

Comandos Angular Cli

Angular

Introducción Y Entorno

Desarrollo De Componentes Angular

Angular

Componentes

Data Binding En Angular

Angular

Componentes

Ciclo De Vida De Componentes En Angular

Angular

Componentes

Comunicación Entre Componentes Angular

Angular

Componentes

La Directiva @If En Angular

Angular

Componentes

La Directiva @For En Angular

Angular

Componentes

Componentes Standalone

Angular

Componentes

Desarrollo De Módulos Angular

Angular

Módulos

Routes En Angular

Angular

Enrutado Y Navegación

Router En Angular

Angular

Enrutado Y Navegación

La Directiva Routerlink En Angular

Angular

Enrutado Y Navegación

Parámetros En Rutas Con Activatedroute

Angular

Enrutado Y Navegación

Routes Sin Módulos En Angular

Angular

Enrutado Y Navegación

Servicios En Angular

Angular

Servicios E Inyección De Dependencias

Httpclient En Servicios De Angular

Angular

Servicios E Inyección De Dependencias

Formularios Con Ngmodel En Angular

Angular

Formularios

Formularios Reactivos En Angular

Angular

Formularios

Subir Archivo En Formularios

Angular

Formularios

Layout Con Angular Material

Angular

Integración Con Angular Material

Tablas En Angular Material

Angular

Integración Con Angular Material

Formularios En Angular Material

Angular

Integración Con Angular Material

Instalación Y Uso De Ngboostrap

Angular

Integración Con Bootstrap Css

Signals En Angular

Angular

Signals Y Reactividad

Effects En Angular

Angular

Signals Y Reactividad

Route Guards Basados En Interfaces

Angular

Autenticación Y Autorización

Guards Funcionales

Angular

Autenticación Y Autorización

Interceptores Http Basados En Interfaz

Angular

Autenticación Y Autorización

Interceptores Http Funcionales

Angular

Autenticación Y Autorización

Seguridad Jwt En Angular

Angular

Autenticación Y Autorización

Decodificar Tokens Jwt En Angular

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

  1. Comprender los requisitos previos para trabajar con Angular.
  2. Instalar Node.js y npm en el sistema.
  3. Actualizar npm a su versión más reciente.
  4. Instalar Angular CLI globalmente.
  5. Verificar la instalación de Angular CLI.
  6. Crear un nuevo proyecto Angular usando Angular CLI.
  7. Servir la aplicación Angular localmente y acceder a ella en el navegador.