¿Qué aprenderá?

Al finalizar este tutorial el estudiante estará en capacidad de crear una nueva aplicación en Angular.

¿Qué obtendrá?

Una nueva aplicación Angular con la estructura básica de archivos.

¿Qué necesita?

1. Manejo básico de git.
2. Manejo de consola de comandos.

Suponiendo que ya tiene instalado Node.js, abra una terminal y teclee el comando:

npm install -g @angular/cli

Defina primero dónde va a alojar su aplicación. Para nuestro caso se ha definido la carpeta D:\wsAngular

Desde una consola de comandos, vaya al folder que acaba de crear y luego teclee:

ng new --no-standalone mynewapp

La opción --no-standalone del comando indica que quiere crear una aplicación basada en módulos y no en componentes individuales. Angular busca con los standalone components simplificar las estructuras de las aplicaciones para reducir el código repetivo; sin embargo, en el curso usaremos los módulos para una mejor organización del proyecto.

Al ejecutar el comando, Angular-cli le preguntará:

• Which stylesheet format would you like to use? En el cual seleccionamos CSS. Con las flechas del teclado se puede seleccionar el formato.
• Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Para esto escribimos ‘n' y presionamos enter.

En algunas versiones de Angular-cli puede preguntar si quiere activar el modo estricto. En este caso, indique no escribiendo la letra N.

El proceso toma un momento mientras se crean los archivos y se instalan las dependencias.

Desde la terminal ingrese a la nueva carpeta mynewapp y luego ejecute:

code .

Esto abrirá VSCode en la carpeta del proyecto

Abra una nueva terminal desde la terminal de VSCode y ejecute:

npm install --save bootstrap

Después de que este proceso termine, se habrá:

• Instalado Bootstrap dentro de la carpeta node_modules de su proyecto.
• Modificado el archivo package.json para incluir la nueva dependencia "bootstrap", que para la fecha de creación de este tutorial es "^5.3.2",

Agregue los estilos Bootstrap en el archivo angular.json. De este modo, el atributo styles, debe quedar:

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/styles.css"
],

Abra una nueva terminal desde la terminal de VSCode y ejecute:

ng generate environments

Se creará una carpeta con el nombre environments como se ve a continuación.

En una consola vaya a la carpeta raíz de su nuevo proyecto y teclee:

ng serve

Al final verá un mensaje:

Application bundle generation complete. [15.016 seconds]
Watch mode enabled. Watching for file changes...

➜ Local: http://localhost:4200/

➜ press h + enter to show help

Vaya al navegador y teclee http://localhost:4200/

Debe ver, entre otras cosas, lo que se detalla en la Figura 1.

Hay varias extensiones de Angular para VSCode. Al menos debemos tener las siguientes:

• Angular Essentials (by John Papa)
• Angular Files (by Alexander Ivanichev)

Para esto vaya al Marketplace y busque Angular Essentials (ver Figura 2) y Angular Files (ver Figura 3).

En el siguiente video revisamos la estructura de la aplicación tal como la creó Angular-cli:

NG-Estructura aplicación inicial