Como crear tu primer HOLA MUNDO en ANGULAR + BOOTSTRAP.
1- Instalar ANGULAR CLI
Angular CLI es una herramienta de linea de comandos que facilita la creación de componentes, servicios, pipes, módulos y muchas cosas mas, también facilita la generación y ejecución de testing y deploy de las aplicaciones hechas en angular.
Nos dirigimos a la pagina de ANGULAR CLI seguimos los pasos que nos indica la documentación y ejecutamos el siguiente comando para instalar.
npm install -g @angular/cliLuego, para verificar si el angular se instalo correctamente, ejecutamos el siguiente comando.
ng --version
Luego nos vamos a la pagina de NODE e instalamos la versión mas estable, en este caso la versión 12.18.3
Para verificar si el NODE se instalo correctamente, ejecutamos el siguiente comando.
node --vDebería salirte algo como esto. En mi caso tengo mi versión un poco desactualizada.
Luego nos vamos a la pagina de GIT e instalamos la versión mas estable, en este caso la versión 2.28.0
Para verificar que la instalación salio correctamente, consultamos por consola la versión instalada con el siguiente comando.
git --version
Finalmente nos vamos a la pagina de TYPESCRIPT e instalamos la ultima versión estable, en este caso la 3.9
Para verificar si se instalo correctamente la versión de typescript, nos vamos a la consola y ejecutamos el siguiente comando:
tsc --vQuizás tu tengas la ultima versión, yo en este caso tengo la anterior.
2- Creando nuestro primer proyecto desde la linea de comandos NG.
Primero que nada nos posicionamos en la carpeta en donde queramos crear nuestro proyecto, y ejecutamos el siguiente comando
ng new proyectoPruebacolocamos “y” para crear el archivo que se encarga de rutear las paginas, luego nos preguntara que hoja de estilos queremos ocupar y damos “ENTER”
Este archivo es innecesario para esta guía ya que solo veremos el funcionamiento de los estilos ya integrados con bootatrap, se indico que lo instalaras para efectos de entender que es lo que hace.
Esperamos que termine …
Damos “ng serve” y deberíamos poder ver la nueva pantalla de inicio de angular, esta se actualizo con la versión 10
3- Instalar BOOTSTRAP como dependencia.
Para realizar esta tarea puedes pinchar AQUÍ en donde podrás visualizar otro tutorial que hice en donde explico paso a paso como instalar este framework de estilos.
4- HOLA MUNDO.
Luego que tienes instalada las siguientes herramientas:
- ANGULAR CLI
- NODE
- GIT
- TYPESCRIPT
- BOOTSTRAP
Nos vamos a la estructura de carpetas y abrimos el archivo app.component.html eliminando todo el contenido que tenga y colocamos este tag <router-outlet></router-outlet>, esto se encarga de renderizar todos los componentes que serán cargados desde el modulo ROUTER del core de angular.
Ahora colocaremos los siguiente
<h1 class="mt-3">HOLA MUNDO desde el HTML</h1>
<h1>{{ title }}</h1>
<router-outlet></router-outlet>
Ahora abrimos el archivo app.component.ts y colocamos el siguiente texto dentro de la clase AppComponent en una variable llamada title
Guardamos, CTRL + S y deberíamos visualizar lo siguiente.
Si todo sale correctamente acá tienes creado un proyecto con bootstrap 4.5 en donde ya puedes agregar todos los componentes de estilos que quieras, cuales son estos? puedes visualizarlos ACÁ.
Si quieres descargar y empezar a ocupar este proyecto, te lo dejo en el siguiente LINK
Muchas gracias por llegar hasta acá y muy agradecido que le pongas “CLAPS” a mis publicaciones, y claro se agradecen todos los feedback posibles, así podre ayudar a los demás de la mejor manera posible.
