vscodeangular

Primera aplicación Angular

• Instalar Angular
• Crear la aplicación
• Instalar bootstrap en la aplicación
• Ejecutar la Aplicación
• Instalar Extensiones
• Entender la aplicación

Instalar Angular

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

npm install -g @angular/cli

Crear la aplicación

Defina primero dónde va a alojar su aplicación. En la siguiente figura el folder es:

D:\wsAngular>

Desde una ventana de comandos o desde una Terminal de VSCode, abriendo primero el folder que acaba de crear, teclee:

ng new primeraApp

La aplicación angular-cli le pregunta:

• Would you like to add Angular routing? No // Por ahora seleccionamos No

• Luego el formato de stylesheet, seleccionamos CSS.

El proceso toma un momento dado que se instalan casi 300M en más de 30 mil archivos.

Instalar Bootstrap

Vaya a la raíz de su proyecto 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": "^4.4.1",

Agregue los estilos Bootstrap en el archivo angular.json. En el atributo styles, debe quedar:`

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

Ejecutar la Aplicación

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

ng serve

Al final verá un mensaje:

** Angular Live Development Server is listening on localhost:4200, open your

browser on http://localhost:4200/ **

i ｢wdm｣: Compiled successfully.

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

Debe ver, entre otras cosas:

Voila !

Instalar Extensiones

Hay varias extensiones de Angular para VSCode. Al menos debemos tener Angular Essentials(que incluye varias de las otras.

Vaya al Marketplace e instale:

Instale también Angular Files

Entender la aplicación

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

Video	NG-Estructura aplicación inicial