Angular es un framework poderoso que se encuentra entre los cinco mejores frameworks basados en JavaScript.
Sin embargo, aunque Angular proporciona la base para un sitio web o una aplicación de una sola página, no ofrece una interfaz de usuario (UI). Tendrá que escribir la interfaz de su aplicación usted mismo. Afortunadamente, hay muchos marcos CSS que puede instalar para que esta tarea sea más fácil de administrar.
Bootstrap es uno de esos marcos que ha evolucionado desde su lanzamiento en 2010. Bootstrap 5, que anteriormente dependía de jQuery, ahora reduce la cantidad de dependencias y se ejecuta principalmente en JavaScript puro. Bootstrap ofrece excelentes funciones de personalización, y muchos desarrolladores dedicados crean temas, widgets y complementos que se pueden usar con el CSS y las funciones de Bootstrap.
Puede combinar fácilmente Bootstrap con Angular para crear sus propias interfaces de usuario y funciones adicionales. Esto le permite crear animaciones y funciones de interfaz de usuario, y crear prototipos del diseño de su sitio. En este tutorial práctico, le mostraremos cómo agregar Bootstrap CSS a su proyecto Angular.
Cómo agregar Bootstrap a Angular
En este tutorial, crearemos una aplicación CLI angular en Node.js. A continuación, instalaremos Bootstrap a través de NPM y lo configuraremos. Una vez configurado, crearemos una pequeña aplicación con un botón y un modal.
1. Requisitos previos
Para completar este tutorial necesitarás:
- Nodo.js instalado.
- p.ej. instalado.
- VOY. Esta demostración utiliza Código de estudio visual.
- CLI angular instalado en su computadora. Para instalar Angular CLI, debe abrir una ventana de consola. Se recomienda instalar la CLI globalmente para que pueda iniciar nuevos proyectos en cualquier lugar. Entonces corre npm install -g @angular/cli@último.
Para obtener una vista previa del proyecto final, eche un vistazo al código completo del proyecto.
2. Crea un proyecto
El siguiente paso es construir el proyecto. Vaya al directorio donde desea crearlo y escriba el siguiente comando: nuevo hola mundo
puedes intercambiar Hola Mundo con su propio ID de proyecto.
Ejecutar este comando cargará la CLI y le pedirá que responda las siguientes preguntas:
- «¿Agregar enrutamiento angular?»: Aquí puede elegir si está creando una aplicación con varias páginas.
- «¿Qué formato de hoja de estilo quieres usar?»: Seleccione su plataforma CSS preferida aquí.
Luego ve a la carpeta de tu proyecto. Cambia a eso con CD comando para acceder al proyecto.
Cuando el proyecto esté listo y se encuentre en la carpeta correcta, ejecútelo haciendo lo siguiente: ng servir –abierto
3. Preparar e instalar Bootstrap
Si ya usa Angular, deberá abrir una nueva ventana de consola para administrar la instalación. Luego ingrese la siguiente información: npm install — guardar arranque
Espere a que se complete la instalación, que solo debería tomar unos minutos.
Luego necesita importar Bootstrap CSS.
En tu aplicación global scs archivo – que probablemente será estilo.scsS – importe el archivo Bootstrap con este comando: @import «~bootstrap/dist/css/bootstrap.css»;
Esto incluye el estilo de Bootstrap 5, lo que le permite usar todas las funciones de CSS que proporciona Bootstrap.
4. Prepara funciones
Luego, debe instalar las funciones de Bootstrap. ir a archivo angular.json y ábrelo. Debe estar en el directorio de nivel superior de la carpeta de su proyecto.
De forma predeterminada, Angular no reconoce que Bootstrap JS está instalado. Necesitas ubicar el guiones sección del archivo de configuración para hacerlo. Inserte esta línea apuntando hacia los archivos de Bootstrap:
./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js
Si no desea importar el bootstrap.css archivo, también puede adjuntarlo aquí debajo estilosabajo src/estilos.scss:
Angular no lo reconocerá de inmediato si se está ejecutando. Así que cierra la página y detente. ng servir –abierto presionando Ctrl+C. Esto hará que el nodo finalice la aplicación Angular.
Luego escribe ng servir –abierto comenzar de nuevo.
Mientras se ejecuta, debería poder acceder a las habilidades de Bootstrap. Puede usar sus características para crear fácilmente elementos como modales, acordeones, pestañas y etiquetas flotantes. Una vez que haya creado un prototipo de su diseño, puede diseñar y cambiar el color de estos elementos para que coincidan con el tema elegido. Esto le ahorra tiempo y le permite concentrarse en crear elementos personalizados que su sitio pueda necesitar.
5. Construye un modal
Ahora que instaló Bootstrap, veamos cómo funciona con un módulo pequeño. Angular genera una aplicación de muestra con un componente principal en la carpeta de la aplicación.
Haga clic en el archivo app.component.html. Verá la plantilla predeterminada. Borre el código allí y agregue el siguiente código para crear el botón y el modal:
abierto aplicación.componente.html archivo en la misma carpeta y luego agregue las siguientes importaciones adicionales Hola:
ArtículoRef permite que Angular 2 haga referencia a elementos en HTML y ver al niño los define. Sin embargo, esto funciona mejor una vez que se inicializa la vista, por lo que deberá hacer referencia a ella AfterViewInit. Para llamar a las funciones de Bootstrap, también debe agregar su importación, que es la última línea del fragmento de código anterior.
Tenga en cuenta que es posible que deba agregar tipos de Bootstrap para que TypeScript entienda la clase. Si es así, en la ventana de la consola en la misma carpeta escriba: npm i –save-dev @types/bootstrap
Ahora está listo para crear un modal funcional. EN aplicación.componente.tsagregue los siguientes métodos y variables a la clase:
Aquí hay un desglose de lo que acaba de agregar:
- Primero agregaste un @ver niño referencia y los dirigió a hola modal objetivo. Esto es ArtículoRef Que tu necesitas. Note que la suma ? permite que TypeScript asuma que no está definido.
- Entonces creaste un ¿modal? variable con tipo bootstrap.Modal. Hace referencia a la clase modal Bootstrap.
- Luego creaste dos métodos, ngAfterViewInit() Y desencadenar()que se están implementando AfterViewInit.
- Adentro AfterViewInitllamaste a bootstrap modal y lo hiciste referencia ArtículoRef y su elemento padre. Puede configurar las opciones de reenvío al mod aquí o dejarlo en blanco con un {}.
- por fin en el tuyo desencadenar() método, llamaste es.modal?.toggle() para cambiar el estado visible.
Ahora, cuando hace clic en un botón en la página, debería aparecer el modal:
En el código de la plantilla, el método Angular (Hacer clic) se refiere a desencadenar() método que llama a Bootstrap. De esta manera, también puede configurar otras funciones haciendo referencia a un elemento y vinculándolos en una plantilla.
Usando Bootstrap con Angular
En este tutorial, creó una aplicación Angular predeterminada usando TypeScript y SASS, y luego aplicó Bootstrap 5 y su CSS a Angular. También aprendió a mostrar un modal usando Bootstrap y código Angular nativo.
Puede usar Bootstrap para mejorar cualquier aplicación que desarrolle, lo que le permite crear rápidamente prototipos y crear aplicaciones receptivas mucho más rápido de lo que lo haría de otra manera. También es compatible con dispositivos móviles, por lo que su sitio web debería funcionar aún mejor en pantallas más pequeñas. Puede utilizar todas sus funciones para crear aplicaciones creativas de forma rápida y sencilla.
