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

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

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.