Al finalizar este tutorial el estudiante estará en capacidad de crear una nueva aplicación en Angular.
Una nueva aplicación Angular con la estructura básica de archivos.
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á:
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á:
node_modules
de su proyecto.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.
Figura 1. Vista de la carpeta environments |
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.
Figura 2. Vista parcial de la aplicación |
Hay varias extensiones de Angular para VSCode. Al menos debemos tener las siguientes:
Para esto vaya al Marketplace y busque Angular Essentials (ver Figura 2) y Angular Files (ver Figura 3).
Figura 3. Marketplace - Instalación de Angular Essentials |
Figura 4. Marketplace - Instalación de Angular Files |
En el siguiente video revisamos la estructura de la aplicación tal como la creó Angular-cli: