Cómo añadir 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 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 de código, herramientas y bibliotecas preconstruidas que ofrecen una forma predefinida de crear aplicaciones. Tanto Bootstrap como Angular son frameworks.

En este artículo se definirá cada marco y se analizarán las ventajas de combinar las dos tecnologías y cómo combinarlas para crear aplicaciones visualmente atractivas y potentes.

¿Qué es Bootstrap?

Bootstrap es un conjunto de herramientas front-end gratuito para crear aplicaciones mobile-first. Este marco de HTML, CSS y JavaScript cuenta con una gran colección de piezas de código reutilizables que los desarrolladores pueden utilizar en diversas partes de sus proyectos.

Este marco cuenta con plantillas de diseño para diversas funciones como botones, modales, carruseles de imágenes, tablas, navegaciones y mucho más. Bootstrap cuenta con una amplia documentación para facilitar su uso.

¿Qué es AngularJS?

AngularJS es un marco de JavaScript que amplía la sintaxis de HTML más allá de un lenguaje de marcado normal. Este marco introduce características como la vinculación de datos que permiten a los desarrolladores evitar el complejo proceso de creación de páginas web con capacidad de respuesta cuando se utiliza HTML.

AngularJS emplea el marco modelo-vista-controlador (MVC), en el que existe una clara separación entre la lógica de la aplicación y la interfaz de usuario. Los desarrolladores pueden utilizar AngularJS para crear aplicaciones web de una sola página, aplicaciones de redes sociales, plataformas de comercio electrónico, sistemas de gestión de contenidos y mucho más.

Ventajas del uso de Bootstrap en Angular

• Componentes de interfaz de usuario preconfigurados: 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 utilizar. Así, los desarrolladores pueden centrarse más en la funcionalidad mientras Bootstrap se encarga de la estructura básica y el estilo.
• Personalizable: Los componentes preconstruidos proporcionan código boilerplate. Sin embargo, puede personalizar el código mientras realiza su aplicación. Por ejemplo, si toma una tarjeta de Bootstrap, puede cambiar varios elementos, como las imágenes y el texto, para adaptarlos a sus necesidades.
• Sensible: Los usuarios de la web moderna navegan en varios dispositivos, desde teléfonos inteligentes y tabletas hasta ordenadores. No tiene que crear una aplicación para cada tamaño de pantalla, ya que Bootstrap proporciona aplicaciones web con capacidad de respuesta.
• Aporta un estilo coherente: Una buena aplicación web debe tener una sensación y un aspecto coherentes en las distintas páginas. El uso de elementos y componentes de Bootstrap puede ayudarle a conseguir este objetivo.
• Comunidad fuerte: Este framework cuenta con muchos recursos y una sólida documentación y está respaldado por muchos desarrolladores.

Requisitos previos

#1. Node.js

Se trata de un entorno de ejecución de JavaScript que utilizará para ejecutar código JavaScript fuera del navegador. Puede comprobar la versión actual de su Node.js ejecutando este comando;

node -v

Puede instalarlo desde el sitio web oficial si no está instalado.

#2. Gestor de paquetes Node (NPM)

NPM gestionará todos los paquetes asociados que necesite para su aplicación Angular. NPM se instala por defecto cuando se instala Node.js. Puede comprobar la versión actual utilizando este comando;

npm -v

#3. Angular CLI

Es una herramienta de línea de comandos que utilizaremos para crear la estructura básica de una aplicación Angular. Puede instale Angular CLI usando este comando;

npm install -g @angular/cli

#4. Un Entorno de Desarrollo Integrado (IDE)

Aquí es donde escribirá su código. Puede utilizar cualquier IDE que soporte JavaScript, como Código de Visual Studio o Webstorm.

Cómo añadir Bootstrap a Angular

Ahora tenemos todas las herramientas necesarias para crear nuestra aplicación Angular. Hay dos enfoques principales para añadir Bootstrap a Angular; 1. Instalar Bootstrap usando NPM. 2. Usando enlaces CDN

Enfoque 1: Usando NPM

Podemos instalar toda la librería de Bootstrap a nuestro proyecto usando NPM. Siga estos pasos;

Paso 1: Usar Angular CLI para configurar la estructura básica de la aplicación

Una típica app Angular tiene muchos archivos. Llamar a nuestra app angular-bootstrap-mockup (puede darle a su app cualquier nombre que le agrade). Utilice este comando para configurar su app;

ng new angular-bootstrap-mockup

Se le plantearán las siguientes preguntas;

• ¿Desea añadir enrutamiento Angular? (sí/no) introduzca y
• ¿Qué formato de hoja de estilo desea utilizar? Seleccione CSS

Una vez finalizada la configuración, tendrá algo similar a esto en su terminal.

Navegue dentro del proyecto creado y vaya al paso 2. Puede utilizar este comando

cd angular-bootstrap-mockup

Abra el proyecto en su editor de código. La estructura del proyecto será la siguiente;

Paso 2: instale arranque y los iconos de bootstrap.

Ejecute este comando para instalar ambos;

npm install bootstrap bootstrap-icons

Paso 3:Incluir Bootstrap en el archivo angular.jhijo

Localice el archivo angular . json 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 Angular UI construidos sobre el framework Bootstrap. Los diferentes componentes de esta librería están diseñados para trabajar con AngularJS.

Utilice este comando para instalarlo;

npm install @ng-bootstrap/ng-bootstrap

Paso 5: Modifique app.module.ts para incluir NgbModule.

Modifique el contenido del archivo app.module . ts 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: Añadir elementos Bootstrap al archivo app.component.html

Hay toneladas de componentes para seleccionar en la web de Bootstrap. Crearemos una sencilla navbar y añadiremos dos botones.

Cambie el contenido de app.component . html de la siguiente manera;

<ul class="nav">

 <li class="nav-item">

 <a class="nav-link active" aria-current="page" href="#">Inicio</a>

 </li>

 <li class="nav-item">

 <a class="nav-link" href="#">Servicios</a>

 </li>

 <li class="nav-item">

 <a class="nav-link" href="#">Acerca de</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&gt>

Paso 7: Ejecute su aplicación

Utilice este comando

ng serve

Cuando se ejecute el desarrollo Angular, podrá abrir http://localhost:4200/ en su navegador.

Enfoque 2: Añadir Bootstrap a Angular utilizando enlaces CDN

Este enfoque le permite enlazar directamente a la Red de Entrega de Contenidos (CDN) que almacena los archivos de Bootstrap.

Podemos crear varios botones utilizando este enfoque en un nuevo proyecto. Siga estos pasos;

Paso 1: Crear un nuevo proyecto Angular

Llamaremos a nuestra aplicación angular-bootstrap-cdn. (Puede elegir cualquier nombre).

Ejecute este comando

ng new angular-bootstrap-cdn

Una vez terminada la instalación, cambie de directorio y abra su proyecto en un editor de código. Puede utilizar este comando para entrar en el directorio del proyecto;

cd angular-bootstrap-cdn

Paso 2: Incluya el enlace CDN en el archivo index.html

Localice el archivo src/index. html y el enlace CDN en la sección head.

<head>

.......

 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

.........

</head&gt

Paso 3: Añadir código Bootstrap al archivocomponente.app.html

Localice el archivo src/app/app.component. html.

Puede añadir este código al archivo;

<button type="button" class="btn btn-primary">Primario</button>

<button type="button" class="btn btn-secondary">Secundario</button>

<button type="button" class="btn btn-success">Éxito</button>

<button type="button" class="btn btn-danger">Peligro</button>

<button type="button" class="btn btn-warning">Aviso</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Luz</button>

<button type="button" class="btn btn-dark">Oscuro</button>

<button type="button" class="btn btn-link">Enlace</button&gt

Paso 4: Ejecute su aplicación

ng serve

Preguntas frecuentes

Conclusión

Ahora puede utilizar cómodamente dos de los marcos frontales más populares, Angular y Bootstrap, para crear diversas aplicaciones.

La elección del enfoque dependerá del caso de uso y del tipo de app que desee crear.

Aunque el enfoque CDN parece fácil, también tiene varios inconvenientes. El mayor reto es la seguridad de su aplicación, ya que los hackers pueden utilizar las CDN para enviar scripts maliciosos a su sitio web.

La instalación de Bootstrap mediante NPM le permite controlar el código que incluye en su aplicación. Sin embargo, este enfoque puede llevar mucho tiempo, ya que tiene que descargar todas las dependencias.

Consulte cómo añadir Bootstrap a una aplicación React.