HTML, JavaScript y CSS se encuentran entre los pilares del desarrollo front-end. Angular es uno de los marcos de JavaScript más utilizados para crear aplicaciones del lado del cliente. Por otro lado, Bootstrap se encuentra entre los marcos de interfaz de usuario (UI) más populares.
Los marcos son una colección de un conjunto prediseñado de código, herramientas y bibliotecas que ofrecen una forma predefinida de crear aplicaciones. Bootstrap y Angular son ambos marcos.
Este artículo definirá cada marco y discutirá los beneficios de combinar las dos tecnologías y cómo combinarlas para crear aplicaciones potentes y visualmente atractivas.
What is Bootstrap?

Bootstrap es un kit de herramientas front-end gratuito para crear aplicaciones móviles primero. Este HTML, CSS y Marco de JavaScript tiene una gran colección de piezas de código reutilizables que los desarrolladores pueden usar en varias partes de sus proyectos.
Este marco tiene plantillas de diseño para varias funciones, como botones, modales, carruseles de imágenes, tablas, navegaciones y mucho más. Bootstrap tiene una extensa documentación para que sea fácil de usar.
What is AngularJS?

AngularJS es un marco de JavaScript que extiende la sintaxis de HTML más allá de un lenguaje de marcado normal. Este marco presenta funciones como el enlace de datos que permite a los desarrolladores evitar el complejo proceso de crear páginas web receptivas cuando se usa HTML.
AngularJS emplea el marco modelo-vista-controlador (MVC), donde existe una clara separación entre la lógica de la aplicación y la interfaz de usuario. Los desarrolladores pueden usar AngularJS para crear aplicaciones web de una sola página, aplicaciones de redes sociales, plataformas de comercio electrónico, sistemas de administración de contenido y más.
Benefits of using Bootstrap in Angular
- Componentes de interfaz de usuario prediseñados: No tiene que crear barras de navegación, botones, carruseles y tarjetas desde cero, ya que Bootstrap tiene piezas de código preconstruidas que puede usar. Por lo tanto, los desarrolladores pueden concentrarse más en la funcionalidad, mientras que Bootstrap se ocupa de la estructura y el estilo básicos.
- Personalizable: Los componentes prefabricados proporcionan un código repetitivo. Sin embargo, puede personalizar el código mientras está en su aplicación. Por ejemplo, si toma una tarjeta de Bootstrap, puede cambiar varios elementos, como imágenes y texto, para satisfacer sus necesidades.
- Sensible: Los usuarios web modernos navegan en varios dispositivos, desde teléfonos inteligentes y tabletas hasta computadoras. No tiene que crear una aplicación para cada tamaño de pantalla, ya que Bootstrap proporciona aplicaciones web receptivas.
- Aporta un estilo consistente: Una buena aplicación web debe tener una apariencia uniforme y verse en diferentes páginas. El uso de elementos y componentes de Bootstrap puede ayudarlo a lograr este objetivo.
- Comunidad fuerte: Este marco está repleto de muchos recursos y documentación sólida y está respaldado por muchos desarrolladores.
Prerequisites
#1. Node.js
Este es un entorno de tiempo de ejecución de JavaScript que usará para ejecutar código JavaScript fuera del navegador. Puede verificar la versión actual de su Node.js ejecutando este comando;
node -v
Puedes instalarlo desde el página web oficial si no está instalado.
#2. Administrador de paquetes de nodos (NPM)
NPM administrará todos los paquetes asociados que necesita para su aplicación Angular. NPM se instala de manera predeterminada cuando instala Node.js. Puede verificar la versión actual usando este comando;
npm -v
#3. CLI angular
Es una herramienta de línea de comandos que usaremos para crear la estructura básica de una aplicación Angular. Puede instalar CLI angular usando este comando;
npm install -g @angular/cli
#4. Un entorno de desarrollo integrado (IDE)
Aquí es donde escribirás tu código. Puede usar cualquier IDE que admita JavaScript, como Código de Visual Studio or Tormenta web.
How to add Bootstrap to Angular
Ahora tenemos todas las herramientas necesarias para crear nuestra aplicación Angular. Hay dos enfoques principales para agregar Bootstrap a Angular; 1. Instalación de Bootstrap usando NPM. 2. Uso de enlaces CDN
Enfoque 1: Uso de NPM
Podemos instalar toda la biblioteca de Bootstrap en nuestro proyecto usando NPM. Sigue estos pasos;
Paso 1: Uso CLI angular para configurar la estructura básica de la aplicación
Una aplicación Angular típica tiene muchos archivos. Nombraremos nuestra aplicación angular-bootstrap-mockup
(puede dar a su aplicación cualquier nombre que le agrade). Use este comando para configurar su aplicación;
ng new angular-bootstrap-mockup
Se le guiará a través de estas preguntas;
- ¿Le gustaría agregar enrutamiento angular? (s/n) ingrese y
- ¿Qué formato de hoja de estilo le gustaría usar? Seleccione CSS
Una vez finalizada la configuración, tendrás algo similar a esto en tu terminal.

Navegue al proyecto creado y vaya al paso 2. Puede usar este comando;
cd angular-bootstrap-mockup
Abra el proyecto en su editor de código. La estructura del proyecto será la siguiente;

Paso 2: instalar bootstrap y iconos de arranque.
Ejecute este comando para instalar ambos;
npm install bootstrap bootstrap-icons
Paso 3: Incluir Bootstrap en angular.json presentar
Localice el angular.json
archivo en la carpeta raíz de su aplicación y cambie estas líneas;
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/bootstrap-icons/font/bootstrap-icons.css",
"src/styles.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Paso 4: instalar ng-bootstrap
Ng-bootstrap es una colección de componentes de interfaz de usuario angular creados sobre el marco Bootstrap. Los diferentes componentes de esta biblioteca están diseñados para funcionar con AngularJS.
Use este comando para instalarlo;
npm install @ng-bootstrap/ng-bootstrap
Paso 5: Modificar aplicación.módulo.ts para incluir Módulo Ngb.
Cambiar el contenido de la app.module.ts
archivo con esto;
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
providers: [
],
bootstrap: [
AppComponent,
],
})
export class AppModule {
}
Paso 5: Modificar app.component.ts
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private modalService: NgbModal) {
}
public open(modal: any): void {
this.modalService.open(modal);
}
}
Paso 6: Agregar elementos de Bootstrap al app.component.html
presentar
Hay toneladas de componentes para seleccionar en el sitio web de Bootstrap. Crearemos una barra de navegación simple y agregaremos dos botones.
Cambiar el contenido de app.component.html
como sigue;
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li>
</ul>
<button type="button" class="btn btn-primary btn-lg">Angular</button>
<button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>
Paso 7: ejecuta tu aplicación
Utilice este comando;
ng serve
Cuando se ejecuta el desarrollo de Angular, puede abrir http://localhost:4200/ en su navegador.

Enfoque 2: Agregue Bootstrap a Angular usando enlaces CDN
Este enfoque le permite vincular directamente a Red de entrega de contenidos (CDN) que almacena archivos Bootstrap.
Podemos crear varios botones usando este enfoque en un nuevo proyecto. Sigue estos pasos;
Paso 1: Crear un nuevo proyecto Angular
Nombraremos nuestra aplicación angular-bootstrap-cdn
. (Puede elegir cualquier nombre).
Ejecute este comando;
ng new angular-bootstrap-cdn
Una vez finalizada la instalación, cambie de directorio y abra su proyecto en un editor de código. Puede usar este comando para ingresar al directorio del proyecto;
cd angular-bootstrap-cdn
Paso 2: incluya el enlace CDN en el archivo index.html
Localice el src/index.html
archivo y enlace CDN en la sección principal.
<head>
…….
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
………
</head>
Paso 3: agregue el código Bootstrap al app.component.html presentar
Localice el src/app/app.component.html
archivo.
Puede agregar este código al archivo;
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Paso 4: ejecuta tu aplicación
ng serve

Frequently Asked Questions
Sí. Bootstrap y Angular Material son bibliotecas de interfaz de usuario creadas para cumplir el mismo propósito. Sin embargo, no debe usar ambas bibliotecas cuando trabaje con el mismo componente, ya que es probable que se bloqueen. Por ejemplo, si desea crear una página de inicio de sesión, elija según los componentes disponibles.
La versión actual de Bootstrap, a partir de este escrito, es v5.3.0-alpha2. Por otro lado, la versión actual de Angular es Angular 15. Cualquier cosa de Bootstrap 4 es compatible con varias versiones de Angular. Sin embargo, siempre consulte la documentación en los sitios web oficiales de Bootstrap y Angular cuando combine las dos tecnologías.
No hay limitación en la naturaleza de las aplicaciones que puede crear con Bootstrap y Angular. Puede usar los dos para crear aplicaciones de una sola página, sitios web de comercio electrónico, plataformas sociales, tableros y paneles de administración. También puede usar Angular con el marco Ionic para crear aplicaciones móviles.
Angular es un marco de JavaScript. Sin embargo, Angular está escrito en Mecanografiado, un superconjunto de JavaScript. TypeScript presenta nuevas funcionalidades que no están disponibles en JavaScript. Por lo tanto, puede usar Angular con aplicaciones TypeScript y Angular.
Conclusión
Ahora puede usar cómodamente dos de los marcos front-end más populares, Angular y Bootstrap, para crear varias aplicaciones.
La elección del enfoque dependerá del caso de uso y del tipo de aplicación que desee crear.
Aunque el enfoque de CDN parece fácil, también tiene varias desventajas. El mayor desafío es la seguridad de su aplicación, ya que los piratas informáticos pueden usar CDN para enviar scripts maliciosos a su sitio web.
Instalar Bootstrap usando NPM le da control sobre el código que incluye en su aplicación. Sin embargo, este enfoque puede llevar mucho tiempo, ya que debe descargar todas las dependencias.
Fin del retiro cómo agregar Bootstrap a una aplicación React.