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 framework 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 preconstruidos: 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.
- Responsive: 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 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 instalar 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 Visual Studio Code 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. 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 app
Una típica app Angular tiene muchos archivos. Llamaremos 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 bootstrap y los iconos de bootstrap.
Ejecute este comando para instalar ambos;
npm install bootstrap bootstrap-icons
Paso 3:Incluir Bootstrap en el archivo angular.json
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({
declaraciones: [
AppComponent,
],
importaciones: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
proveedores: [
],
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 montones 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="#">Home</a>
</li> <li
<li class="nav-item">
<a class="nav-link" href="#">Servicios</a>
</li> <li
<li class="nav-item">
<a class="nav-link" href="#">Acerca de</a>
</li> <li
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li> <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: 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>Paso 3: Añadir código Bootstrap al archivo app.component.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">Información</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>Paso 4: Ejecute su aplicación
ng serve
Preguntas frecuentes
Sí. Bootstrap y Angular Material son librerías de interfaz de usuario creadas para servir al mismo propósito. Sin embargo, no debería utilizar ambas librerías cuando se trate del mismo componente, ya que es probable que choquen. Por ejemplo, si desea crear una página de inicio de sesión, elija cualquiera de las dos en función de los componentes disponibles.
La versión actual de Bootstrap, en el momento de escribir estas líneas, es la v5.3.0-alpha2. Por otro lado, la versión actual de Angular es Angular 15. Cualquier cosa a partir de Bootstrap 4 es compatible con varias versiones de Angular. No obstante, compruebe siempre la documentación de los sitios web oficiales tanto de Bootstrap como de Angular cuando combine las dos tecnologías
No hay ninguna limitación en cuanto a la naturaleza de las aplicaciones que puede construir utilizando Bootstrap y Angular. Puede utilizar los dos para construir aplicaciones de una sola página, sitios web de comercio electrónico, plataformas sociales, cuadros de mando y paneles de administración. También puede utilizar Angular con el framework Ionic para crear aplicaciones móviles.
Angular es un framework JavaScript. Sin embargo, Angular está escrito en TypeScript, un superconjunto de JavaScript. TypeScript introduce nuevas funcionalidades que no están disponibles en JavaScript. Por lo tanto, puede utilizar Angular tanto con aplicaciones TypeScript como Angular.
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 piratas informáticos 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.