En este tutorial aprenderemos, por ejemplo, cómo usar Bootstrap 4 y jQuery con Angular 10 para crear interfaces de usuario profesionales.
Angular 10 es la última versión de Angular, al escribir este tutorial, y Bootstrap 4 es la última versión de Bootstrap, el marco CSS más popular. Puede usar Bootstrap y jQuery para crear interfaces de aspecto profesional sin ser un diseñador de CSS.
Nota: Bootstrap 4 hace uso de jQuery para implementar muchos componentes que necesitan acceso DOM. Bootstrap 5 reemplazará jQuery con JavaScript simple
En este tutorial, veremos particularmente cómo agregar Bootstrap 4 a proyectos de Angular generados con Angular CLI 10 .
En esta parte, vamos a diseñar una interfaz de interfaz de usuario de ejemplo con Bootstrap 4, después de instalar y configurar el marco en el front-end de Angular 10.
En el tutorial anterior, hemos:
- Instalado Angular CLI 10.
- Se generó una nueva aplicación de front-end utilizando Angular CLI 10.
- Creó algunos componentes de la interfaz de usuario.
Diferentes formas de integrar Bootstrap 4 con Angular 10
Hay muchas formas de agregar Bootstrap 4 a proyectos angulares:
- Instalar bootstrap y jquery a través de npm y agregar scripts y estilos a
angular.json
. - Importación de archivos de script y estilo de arranque en formato
src/index.html
. Puede utilizar un CDN bootstrap 4 . - Instalación de arranque a través de la NGP y la importación
@import "~bootstrap/dist/css/bootstrap.css";
ensrc/styles.css
. - Instalación y uso de ng-bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
: es una biblioteca que contiene componentes angulares nativos para el marcado y los estilos CSS de Bootstrap. No depende de jQuery o JavaScript de Bootstrap.
¿Cómo trabajar con este tutorial?
Para completar este tutorial, deberá:
- Comience con el tutorial anterior, que lo lleva desde instalar Angular CLI 10 hasta llamar a la API RESTful
- Clone el proyecto de final de fuente de GitHub y siga los pasos del tutorial anterior para configurar el proyecto.
- Siga directamente los pasos para integrar Bootstrap 4 en su propio proyecto de Angular 10.
¿Cómo agregar Bootstrap 4 a su Angular 10 Front-End?
Después de ver diferentes formas de agregar Bootstrap 4 a Angular 10, ahora diseñemos nuestra interfaz de usuario de interfaz de Angular 10, construida en el tutorial anterior, con Bootstrap. Usaremos el primer enfoque, es decir, instalaremos bootstrap desde npm y luego incluiremos bootstrap.css
el archivo CSS, jQuery y Popover.js
Instalación de Bootstrap 4 y jQuery
Dirígete a tu proyecto, que creaste en el tutorial anterior, navega dentro de tu aplicación de interfaz de usuario Angular 10:
$ cd frontend
A continuación, instale bootstrap y jquery desde npm usando:
$ npm install --save bootstrap jquery
Añadiendo Bootstrap 4 a Angular CLI 10
A continuación, abra angular.json
. Debes tener contenido similar al siguiente:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"crmapp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/crmapp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
...
},
"defaultProject": "crmapp"
}
Bajo projects -> architect -> build -> scripts
agregar node_modules/jquery/dist/jquery.min.js
y node_modules/bootstrap/dist/js/bootstrap.min.js
:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Debajo de projects -> architect -> build -> styles
agregar node_modules/bootstrap/dist/css/bootstrap.min.css
:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Eso es. Ahora puede usar Bootstrap 4 en su aplicación de interfaz de usuario de Angular 10 como lo haría normalmente.
Diseñar componentes de Angular 10 con Bootstrap 4
Pongamos un ejemplo. Continúe, ábralo src/app/app.component.html
y actualícelo para agregar una barra de navegación de Bootstrap:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Angular CRM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" [routerLink]="'/accounts'"> Accounts </a>
<a class="dropdown-item" [routerLink]="'/create-account'"> Create Account </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" [routerLink]="'/contacts'"> Contacts </a>
<a class="dropdown-item" [routerLink]="'/create-contact'"> Create Contact </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" [routerLink]="'/leads'"> Leads </a>
<a class="dropdown-item" [routerLink]="'/create-lead'"> Create Lead </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" [routerLink]="'/opportunities'"> Opportunities </a>
<a class="dropdown-item" [routerLink]="'/create-opportunity'"> Create Opportunity </a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
Ahora, diseñemos el componente de la lista de contactos. Abrir src/app/contact-list.component.html
y agregar:
<h1>
My Contacts
</h1>
<div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tr *ngFor="let contact of contacts">
<td> {{ contact.first_name }} </td>
<td> {{ contact.last_name }} </td>
<td> {{ contact.phone }} </td>
<td> {{ contact.email }} </td>
<td> {{ contact.address }} </td>
</tr>
</table>
</div>
Esta es una captura de pantalla del resultado después de agregar clases de Bootstrap 4:
Conclusión
En este tutorial, hemos visto diferentes formas que puede usar si desea agregar Bootstrap 4 / jQuery a su proyecto y luego hemos visto por ejemplo cómo agregar Bootstrap 4 a nuestra aplicación de front-end Angular 10 generada con Angular CLI.
0 Comentarios
Dejanos tu comentario para seguir mejorando!