Geekflare cuenta con el apoyo de nuestra audiencia. Podemos ganar comisiones de afiliados comprando enlaces en este sitio.
Comparte en:

Cómo agregar Bootstrap a Angular [paso a paso]

Cómo-agregar-Bootstrap-a-Angular
Escáner de seguridad de aplicaciones web Invicti – la única solución que ofrece verificación automática de vulnerabilidades con Proof-Based Scanning™.

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?

¿Qué es 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?

Qué es 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.

Screenshot-from-2023-03-29-10-44-09

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;

Screenshot-from-2023-03-29-10-49-20

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"

]
imagen-293

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.

screenzy-1680103584535-2

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

¿Puedes usar Bootstrap y Angular Material juntos en el mismo proyecto?

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. 

¿Qué versión de Bootstrap es compatible con Angular?

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. 

¿Qué proyectos puedes construir usando Bootstrap y Angular?

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. 

¿Es Angular un framework JavaScript o TypeScript?

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

Gracias a nuestros patrocinadores
Más lecturas interesantes sobre el desarrollo
Impulse su negocio
Algunas de las herramientas y servicios para ayudar a que su negocio crezca.
  • Invicti utiliza Proof-Based Scanning™ para verificar automáticamente las vulnerabilidades identificadas y generar resultados procesables en cuestión de horas.
    Prueba Invicti
  • Web scraping, proxy residencial, administrador de proxy, desbloqueador web, rastreador de motores de búsqueda y todo lo que necesita para recopilar datos web.
    Prueba Brightdata
  • Semrush es una solución de marketing digital todo en uno con más de 50 herramientas en SEO, redes sociales y marketing de contenido.
    Prueba Semrush
  • Intruder es un escáner de vulnerabilidades en línea que encuentra debilidades de ciberseguridad en su infraestructura, para evitar costosas filtraciones de datos.
    Intente Intruder