Preparación del entorno para programar con Angular

Primero vamos a ver la instalación de todas las herramientas necesarias pero para Angular, por el lado del cliente.

Angular va a ser el encargado del frontend, la parte de las aplicaciones por el lado del cliente. Posteriormente veremos todas las herramientas por el backend, el lado de Spring.

Instalar Angular

Primero descargamos e instalamos node, incluye un componente llamado npm (node package manager), es el equivalente a Maven en Java para descargar y administrar dependencias. La instalación es muy simple, descargamos el instalador y damos a siguiente, siguiente …

Abrimos el PowerShell de Windows como Administrador y podemos ver que node y npm están instalados correctamente. Para ello usamos los siguientes comandos para ver sus versiones.

node -v
npm -v

Instalar TypeScript

Ahora vamos a instalar TypeScript. Con esto conseguimos que se nos vayan marcando los errores mientras escribimos código. TypeScript es el lenguaje en el que se programa en Angular. TypeScript está basado en JavaScript. Descargar TypeScript.

Comando para instalar TypeScript:

npm install -g typescript

El -g significa global, por eso debemos usar el PowerShell como administrador. Para comprobar que se ha instalado correctamente usamos:

tsc -v

En caso de que devuelva un error «No se puede cargar el archivo ***.ps1 porque en el sistema está deshabilitada la ejecución de scripts. «, debemos usar el comando:

Set-ExecutionPolicy Unrestricted

Una vez cambiado esto, podemos ver que el estado es Unrestricted usando el siguiente comando:

Get-ExecutionPolicy

Instalación Angular CLI

Ahora instalamos la consola de Angular, Angular CLI.

npm install -g @angular/cli

Podemos comprobar que la instalación es correcta con:

ng version

Debemos tener en cuenta que TypeScript no es interpretable por los navegadores, por lo tanto nuestros proyectos deben ser compilados a JavaScript, que los navegadores sí pueden entender. Eso ya lo veremos a lo largo del curso.

Instalación de Atom

Atom va a ser el editor con el que vamos a aprender a programar con Angular. Descargar Atom. Su instalación es muy sencilla, simplemente ejecutar el instalable.

Una vez instalado, instalamos algunos paquetes importantes para programar con Angular.

• angular-2-typescript-snippets. Para instalarlo por consola sería: apm install nombre-del-paquete.
• atom-typescript.
• atom-bootstrap3.
• atom-bootstrap4.
• v-bootstrap4.
• platformio-ide-terminal (terminal dentro de Atom).
• file-icons.
• emmet (para html, autocompletar, …).
• minimap (mapa de nuestro código).