Requisitos para instalar node:

  • Node.js → descargamos la versión LTS.
  • VSC → IDE de Microsoft, compatible con TypeScript.

Verificando la instalación de node.js y npm

Primeramente, tenemos las versiones que verificar la instalación de node y npm con:

Ya que realizaremos la instalación de Angular CLI vía npm con la instrucción: npm install -g @angular/cli

Instalando Angular CLI:

Aunque no trabajaremos con node.js, sí que usaremos NPM (Node Package Manager) su instalador de paquetes para realizar la instalación de Angular.

Para instalarlo utilizaremos el comando: npm install -g @angular/cli

¿Qué significa ese comando? Nos permitirá instalar mediante a npm install, de forma global (-g) el paquete de angular/cli (@angular/cli).

Verificando la instalación de angular

Una vez terminada la instalación, si ahora hacemos un ng –version, podemos confirmar que la instalación de ha realizado correctamente:

¿Qué es Angular CLI?

Angular CLI, es la Command Line Interface de Angular que nos permitirá crear proyectos con una estructura ya predefinida. Mediante a este scaffolding (andamiaje), construiremos la estructura básica de un proyecto de Angular que contendrá todo lo necesarios para que podamos partir de allí para desarrollar nuestras aplicaciones en Angular.

Las principales ventajas de trabajar con Angular CLI es que tenemos una estructura idéntica para todos los proyectos, de una forma veloz y rápidamente podemos ponerla en ejecución.

Angular CLI, por tanto, nos permite crear la estructura básica de un proyecto de forma sencilla. Con Angular CLI, todos nuestros proyectos tendrán la misma estructura y ponerla en ejecución local será rápido y sencillo permitiéndonos arrancar nuestro proyecto en un periquete.

Creando un proyecto

Para crear un proyecto, utilizamos todos estos pasos a excepción del comando de instalación npm install -g @angular/cli (ya que acabamos de instalar Angular hace unos instantes, y, por tanto, no nos hace falta instalarlo, solo hay que hacerlo una vez):

NG es el comando con el que le indicaremos a la Terminal que vamos a trabajar con Angular.

Si hacemos un ng  help, podemos ver el listado completo de comandos disponibles en Angular.

Creando el proyecto (ng new)

  • Ng new: nos va a permitir crear un proyecto (workspace), para ello, nos situamos en la Terminal y en mi caso desde la ruta desktop (el escritorio) creo el proyecto con ng new.

No dejamos espacios en el nombre del proyecto para evitar problemas con la creación de nuestro proyecto. Podemos usar guiones para separar el nombre del proyecto si tiene varias palabras

En mi caso, el nombre del proyecto será my-first-app (podéis poner el que queráis):

Nos pregunta si queremos trabajar con rutas (routing), le marcamos que N (no), ya que por el momento es un concepto sobre el que no estamos familiarizados y, por tanto, un concepto que aún nos supera:

Seguidamente, nos pregunta que formato de hojas de estilos queremos utilizar, en mi caso seleccionaré CSS por el momento al ser el más sencillo de utilizar:

Y vemos que empieza a crear archivos en nuestro proyecto. Ha iniciado el proceso de scaffolding (andamienando), en el que se está (construyendo/montando) la estructura de nuestro proyecto:

Una vez finalizada la instalación, es normal que aparezcan warnings (alertas) pero no errores, nos aparecerá que el proyecto se ha inicializado.

Y, por tanto, ya tenemos nuestro proyecto creado.

Situándonos a dentro del proyecto (con cd)

Si ahora vamos a la ruta donde hemos creado el directorio, podemos ver que nos lo ha creado junto a toda la estructura de un proyecto de Angular:

Para arrancar el proyecto, primeramente, necesitamos situarnos sobre el proyecto.

Para ello, hacemos un cd a dicha ruta, en mi caso al estar en el escritorio, solamente tengo que hacer un cd a my-first-app (que es el nombre de la aplicación d nuestra primera aplicación de Angular que acabamos de crear):

Finalmente, para abrir el proyecto en VSC, hacemos:

Vemos que se nos abrirá el proyecto que acabamos de crear (nuestro workspace) en VSC y podemos ver el conjunto de archivos que forman parte del proyecto. Por el momento, no nos tenemos que preocupar por ellos, ya que los explicaremos en otro artículo detalladamente más adelante:

Iniciando un proyecto

Para iniciar el proyecto, tenemos varias maneras:

  • ng serve: nos arranca el proyecto y tenemos que abrirlo nosotros desde en navegador con la ruta http://localhost:4200.

El proceso tardará unos instantes ya que está realizando la transpilación de TS a JS:

Si ahora desde la terminal nos situamos sobre la ruta y hacemos cntl + click o escribimos http://localhost:4200/ en nuestro navegador, podemos ver que se nos abrirá la plantilla que nos trae por defecto Angular al crear un proyecto.

Nuestra aplicación está operativa a nivel local y funcionará siempre que no cerremos o detengamos la terminal del VSC en la que tenemos el ng serve trabajando.

Para detenerla podemos pulsar a la vez Control junto a la tecla C veremos que nos detiene la ejecución de ng serve:

  • ng serve -o: arranca nuestro proyecto de Angular y una vez arrancado automáticamente nos abre una pestaña del navegador (la primera vez que lo arrancamos).

Con ello, nos evitamos el paso de tener que escribir la ruta desde el navegador. Por tanto, inicializa el servidor (lo mismo que ng serve) y, además, nos abre una pestaña del navegador.

  • ng serve –port: hasta ahora, hemos trabajado siempre desde el puerto por defecto, en este caso, vamos a ver una opción con la que podemos cambiar el puerto sobre el que arrancará nuestro proyecto de angular.

Si vamos a la ruta desde nuestro navegador, vemos que hemos arrancado sobre el puerto 1234:

  • npm start: si vamos al archivo package.json, podemos ver que dentro de scripts, tenemos una propiedad llamada start asociada a ng serve. Por tanto, si tratamos de arrancar nuestra aplicación con npm start, internamente llamará a ng serve. Es otra manera que nos podemos encontrar de arrancar nuestro proyecto de Angular.

En próximas lecciones continuaremos profundizando en el framework de Angular. Espero que os haya gustado. ¡Saludos y hasta la próxima!