Crear primera aplicación en Angular
Photo by Zan on Unsplash

En este tutorial te mostraré cómo crear tu primera aplicación con el framework de javascript Angular y también verás cómo crear tu primer componente y ya sabes sin tanto rodeo vamos al grano. Sin más manos a la obra.

Requisitos previos

  1. Tener instalado Nodejs de manera global en el sistema operativo.
  2. Contar con Git instalado.

1. Instalar Angular CLI

Angular CLI es una herramienta que nos permite crear proyectos de Angular con toda la configuración necesaria ya lista. Para instarlo abre tu consola de comandos y escribe el comando:

npm install -g @angular/cli

2. Crear proyecto nuevo en Angular

Desde la consola de comandos dirígete a la carpeta o ubicación en donde será la raíz de tu proyecto y para crear un nuevo proyecto en Angular escribe el comando:

ng new myapp

Te preguntará si quieres agregar Angular routing, escribes «y» y oprimes Enter:

quieres agregar Angular routing?

Escoge el tipo de hoja de estilo que usarás, en mi caso escogí CSS:

Crear primera aplicación en Angular

Iniciará la descarga de dependencias para el nuevo proyecto:

4. Abrir proyecto en editor de texto

La nueva carpeta de tu proyecto abrela con tu editor de texto favorito, en mi caso usaré Visual Studio Code:

Crear primera aplicación en Angular

Desde aquí puedes ver como se encuentra distribuido las carpetas y archivos de tu nuevo proyecto en Angular.

5. Encender el servidor de desarrollo integrado

Para encender el servidor de desarrollo desde la consola de comandos escribe el comando:

ng serve

Enciende el servidor de desarrollo de Angular

Al encender el servidor de prueba se abre un puerto especial para mostrar tu proyecto, desde tu navegador web ve a la dirección http://localhost:4200/ verás que tu aplicación ya está corriendo:

Crear primera aplicación en Angular

6. Crear primer componente de la app

La ventaja de instalar Angular CLI es que puedes crear componentes con solo escribir un comando, para este ejemplo crearás un componente que se llamará «hello-world», desde la terminal escribe:

ng generate component hello-world

Este comando genera cuatro archivos dentro de una nueva carpeta llamada ‘hello-world’ en la ruta myapp/src/app/hello-world:

Como puedes ver crear tu primera aplicación en Angular no es nada difícil. Ahora abre el archivo myapp/src/app/hello-world/hello-world.component.html que es la plantilla de tu componente en este caso nos muestra una etiqueta «p» con un texto:

abre el archivo de tu componente

Para mostrar tu nuevo componente en la vista en el navegador web abre el archivo myapp/src/app/app.component.html y agrega la etiqueta de tu nuevo componente, puedes ponerla en donde tu quieras, en mi caso lo hice en la línea 353:

Crear primera aplicación en Angular

Ve al navegador a la vista de tu aplicación, el componente ya se está mostrando:

Conclusión

Has aprendido a cómo crear tu primera aplicación en Angular y cómo crear tu primer componente. Si te ha servido este tutorial te invito a compartirlo en tus redes sociales para llegar a más personas y si tienes dudas o comentarios déjalos en la caja de comentarios, estaré al pendiente de ellos. Hasta la próxima!

Te puede interesar:

Cómo crear un CRUD con Laravel 8 y Livewire

Ads

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.