27 octubre, 2021

Primeros pasos con Angular

¿Qué es?

En este tutorial, vamos a aprender a instalar Angular y lanzar nuestro primer proyecto. Angular es un framework para crear interfaces web, desarrollado por Google en TypeScript. La página oficial de Angular se encuentra en:

https://angular.io/

¿Cómo lo instalo?

Para emepezar, se necesita tener instalado NodeJS, siguiendo los pasos indicados en la sección de descargas de la web oficial.

A continuación, según indica la web de Angular, instalamos, de forma global, el paquete npm del cliente para terminal de Angular, ejecutando el siguiente comando:

npm install -g @angular/cli

Como resultado, podremos ejecutar comandos ng desde nuestra terminal, tanto para crear proyectos nuevos como para añadir elementos a un proyecto ya creado.

¿Por dónde empiezo?

En este tutorial, nos limitamos a crear un ejemplo básico. Para ello, tal y como indico en el propio ejemplo, creamos nuestro proyecto desde la terminal, usando el comando ng, y accedemos a su directorio:

ng new hi
cd hi

Durante el proceso de creación del proyecto, te aparecen un par de preguntas, sobre si quieres utilizar Angular Routing, a lo que podemos responder que no, con una N, ya que este ejemplo no va a utilizar el sistema de enrutado de Angular, y otra pregunta sobre qué formato de hoja de estilos vamos a emplear, que depende de vuestras propias necesidades, conocimientos o como os sintáis más cómodos. En mi caso, elijo SCSS, del que ya hablé hace un tiempo.

Una vez tenemos creado el ejemplo, lo ponemos en marcha, ejecutando:

npm start

Y en nuestro navegador accedemos a:

http://localhost:4200/

Como resultado, veremos nuestro primer ejemplo en Angular.

El código lo tengo compartido en mi cuenta de GitHub:

https://github.com/diegorys/angular-examples/tree/main/hi

Deja una respuesta

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies