Un viaje de mil millas debe comenzar con un solo paso
: Lao Tzu

Este artículo lo guiará a través de los pasos para configurar una aplicación angular, agregar una biblioteca de materiales para los componentes de la interfaz de usuario y firebase para alojar la aplicación.

¿Qué estamos aprendiendo hoy?

1. Creando una aplicación angular usando Angular CLI
2. Añadiendo biblioteca de materiales a nuestra aplicación.
3. Crear una cuenta de firebase y usar firebase para implementar nuestra aplicación

1. Creando una aplicación angular usando CLI angular

El primer paso es verificar si tenemos Node.js instalado en nuestra máquina. Si no es así, vaya a Node.js (la instalación será sencilla y no necesita cambiar ninguna configuración predeterminada). Una vez completada la instalación, vaya directamente a una ventana de terminal y escriba el siguiente comando que le dará la versión instalada

nodo -v

El siguiente paso es instalar angular cli usando el siguiente comando

npm install -g @ angular / cli

Para comprobar si todo salió bien, debemos escribir el siguiente comando

ng - versión

A continuación, en la terminal, vaya a la carpeta deseada donde desea guardar su aplicación y escriba

ng nuevo nombre-de-su-aplicación

Esto le pedirá que agregue un módulo de enrutamiento para su aplicación y diga que sí.
Y luego le preguntará qué formato de hoja de estilo le gusta usar. Prefiero el formato SCSS

Recomendaría usar código de Visual Studio para el desarrollo de aplicaciones angulares. Una vez que lo tenga instalado, vaya a la carpeta de su aplicación y escriba el siguiente comando

codigo.

Esto abrirá una instancia de código de Visual Studio.

2. Agregar biblioteca de materiales a nuestra aplicación

Presione Ctrl + ` que abrirá el terminal dentro del código VS y luego comience a escribir el comando para agregar Material UI a su aplicación.

ng agregar @ angular / material

Le pedirá que seleccione un tema (elija cualquiera de los temas prediseñados), tipografía de material global (Diga que sí) y animaciones angulares (Diga que sí)

Ahora, abramos "app.module.ts" y agreguemos una declaración de importación para "MatButtonModule" y agreguemos MatButtonModule a la matriz de importaciones

El siguiente paso es mostrar el botón mat-elevado para verificar si todo salió bien al agregar la biblioteca de materiales a nuestra aplicación.

Diríjase a "app.component.html" y elimine todo el código repetitivo y agregue un botón con la directiva "mat-raise-button" como se muestra a continuación y sirva la aplicación usando

ng servir

Si ve el botón como el anterior, hemos agregado con éxito la biblioteca de materiales a nuestra aplicación.

Puede consultar el sitio web de materiales para obtener más información sobre la configuración de la biblioteca de materiales.

3. Crear una cuenta de firebase y usar firebase para implementar nuestra aplicación

Este paso es sencillo y similar a la mayoría de los sitios web de configuración de cuentas en línea. Dirígete al sitio web de Firebase y crea una cuenta.

El siguiente paso es configurar nuestra aplicación para usar firebase como nuestro host.

Dirígete al terminal de código VS y di

npm install -g firebase-tools

una vez instalado, necesitamos iniciar sesión en nuestra cuenta usando

inicio de sesión de firebase

El siguiente paso es agregar archivos de configuración relacionados con firebase a nuestro proyecto usando

firebase init

Este paso solicitará varias preguntas relacionadas con cómo desea utilizar firebase para su aplicación

1. ¿Qué funciones de Firebase CLI desea configurar para esta carpeta?
   Seleccionar hosting por ahora
2. Seleccione "Crear un nuevo proyecto" e ingrese una identificación única para su aplicación.
3. ¿Qué desea utilizar como directorio público? Diga "dist / el nombre de su aplicación" porque aquí es donde se almacenarán los archivos de compilación de producción de la aplicación angular
4. ¿Configurar como una aplicación de una sola página? (solo di "si")

ng build - prod

Para alojar nuestra aplicación en firebase

despliegue de base de fuego

Haga clic en el enlace URL de alojamiento y debería poder ver su solicitud en línea.

Gracias y disfruta!