Diseñar una aplicación angular con Bootstrap

En este tutorial, usaremos las últimas versiones de Bootstrap 4 y Angular 7 para crear una aplicación Angular y diseñar la interfaz con Bootstrap.

En caso de que ya haya intentado crear una aplicación web con Angular 7, es hora de mejorarla. Veamos cómo podemos integrar estilos CSS Bootstrap y archivos JavaScript con un proyecto Angular generado usando Angular CLI, y cómo usar controles y clases de formulario para crear hermosos formularios y cómo diseñar tablas HTML usando estilos de tabla .

Para la parte de Angular, crearemos una aplicación simple del lado del cliente para crear y enumerar contactos. Cada contacto tiene una identificación, nombre, correo electrónico y descripción, y usaremos un servicio de datos simple que almacena los contactos en una matriz TypeScript. En su lugar, puede utilizar una API avanzada en memoria. (Consulte “ Una guía completa para el enrutamiento en Angular ”.)

Nota : Puede obtener el código fuente de este tutorial desde este repositorio de GitHub y ver el ejemplo en vivo aquí .

Requisitos

Antes de comenzar a crear la aplicación de demostración, veamos los requisitos necesarios para este tutorial.

Básicamente, necesitarás lo siguiente:

• Node.js y NPM instalados (simplemente puede dirigirse al sitio web oficial y descargar los binarios para su sistema),
• Familiaridad con TypeScript,
• Experiencia laboral en Angular,
• Conocimientos básicos de CSS y HTML.

Instalación de CLI angular

Comencemos instalando la última versión de Angular CLI. En tu terminal, ejecuta el siguiente comando:

$ npm install -g @angular/cli

En el momento de escribir este artículo, está instalada la versión 7.0.3 de Angular CLI. Si ya tiene la CLI instalada, puede asegurarse de tener la última versión usando este comando:

$ ng --version

Creando un proyecto

Una vez que tenga instalado Angular CLI, usémoslo para generar un proyecto de Angular 7 ejecutando el siguiente comando:

$ ng new angular-bootstrap-demo

Luego, la CLI le preguntará:

¿Le gustaría agregar enrutamiento angular?

Prensa Y. A continuación te preguntará:

¿Qué formato de hoja de estilo te gustaría usar?

Elija “CSS”.

Agregar arranque

Después de crear el proyecto, necesitas instalar Bootstrap 4 e integrarlo con tu proyecto Angular.

Primero, navega dentro de la carpeta raíz de tu proyecto:

$ cd angular-bootstrap-demo

A continuación, instale Bootstrap 4 y jQuery desde npm:

$ npm install --save bootstrap jquery

(En este caso, están instalados bootstrap v4.2.1 y jquery v3.3.1 ).

Finalmente, abra el angular.jsonarchivo y agregue las rutas de los archivos Bootstrap CSS y JS, así como jQuery a las matrices stylesy debajo del objetivo:scriptsbuild

"architect": {  "build": {    [...],     "styles": [      "src/styles.css",         "node_modules/bootstrap/dist/css/bootstrap.min.css"      ],      "scripts": [        "node_modules/jquery/dist/jquery.min.js",        "node_modules/bootstrap/dist/js/bootstrap.min.js"      ]    },

Vea cómo agregar Bootstrap a un proyecto de Angular 6 para conocer las opciones sobre cómo integrar Bootstrap con Angular.

Agregar un servicio de datos

Después de crear un proyecto y agregar Bootstrap 4, crearemos un servicio Angular que se utilizará para proporcionar algunos datos de demostración para mostrar en nuestra aplicación.

En su terminal, ejecute el siguiente comando para generar un servicio:

$ ng generate service data

Esto creará dos archivos src/app/data.service.spec.tsy src/app/data.service.ts.

Abra src/app/data.service.tsy reemplace su contenido con lo siguiente:

import { Injectable } from '@angular/core';@Injectable({  providedIn: 'root'})export class DataService {  contacts = [    {id: 1, name: "Contact 001", description: "Contact 001 des", email: "c001@email.com"},    {id: 2, name: "Contact 002", description: "Contact 002 des", email: "c002@email.com"},    {id: 3, name: "Contact 003", description: "Contact 003 des", email: "c003@email.com"},    {id: 4, name: "Contact 004", description: "Contact 004 des", email: "c004@email.com"}  ];  constructor() { }  public getContacts():Array{id, name, description, email}{    return this.contacts;  }  public createContact(contact: {id, name, description, email}){    this.contacts.push(contact);  }}

Agregamos una contactsmatriz con algunos contactos de demostración, un getContacts()método que devuelve los contactos y createContact()que agrega un nuevo contacto a la contactsmatriz.

Agregar componentes

Después de crear el servicio de datos, lo siguiente que necesitamos es crear algunos componentes para nuestra aplicación. En tu terminal ejecuta:

$ ng generate component home$ ng generate component contact-create$ ng generate component contact-list

A continuación, agregaremos estos componentes al módulo de enrutamiento para permitir la navegación en nuestra aplicación. Abra el src/app/app-routing.module.tsarchivo y reemplace su contenido con lo siguiente:

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { ContactListComponent } from './contact-list/contact-list.component';import { ContactCreateComponent } from './contact-create/contact-create.component';import { HomeComponent } from './home/home.component';const routes: Routes = [  {path:  "", pathMatch:  "full",redirectTo:  "home"},  {path: "home", component: HomeComponent},  {path: "contact-create", component: ContactCreateComponent},  {path: "contact-list", component: ContactListComponent}  ];@NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]})export class AppRoutingModule { }

Usamos la redirectTopropiedad de la ruta del enrutador para redirigir a los usuarios a la página de inicio cuando visitan nuestra aplicación.

Agregar componentes de encabezado y pie de página

A continuación, creemos los componentes de encabezado y pie de página:

$ ng generate component header$ ng generate component footer

Abra el src/app/header/header.component.htmlarchivo y agregue el siguiente código:

nav  a href="#"Angular Bootstrap Demo/a  button type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"    aria-expanded="false" aria-label="Toggle navigation"    span/span  /button  div    ul      li        a routerLink="/home"Home/a      /li      li        a routerLink="/contact-list"Contacts/a      /li      li        a routerLink="/contact-create"Create/a      /li    /ul  /div/nav

Se creará una barra de navegación con Bootstrap 4 y usaremos la routerLinkdirectiva para vincular a diferentes componentes.

Utilice las .navbarclases .navbar-expand{-sm|-md|-lg|-xl}y .navbar-darkpara crear barras de navegación Bootstrap. (Para obtener más información sobre las barras de navegación, consulte la documentación de Bootstrap sobre " Navbar ".

A continuación, abra el src/app/header/header.component.cssarchivo y agregue:

.nav-item{    padding:2px;    margin-left: 7px;}

A continuación, abra el src/app/footer/footer.component.htmlarchivo y agregue:

footer  p © Copyright 2019. All rights reserved./p/footer

Abra el src/app/footer/footer.component.cssarchivo y agregue:

footer {    position: absolute;    right: 0;    bottom: 0;    left: 0;    padding: 1rem;    text-align: center;}

A continuación, abra el src/app/app.component.htmlarchivo y reemplace su contenido con lo siguiente:

app-header/app-headerrouter-outlet/router-outletapp-footer/app-footer

Estamos creando un shell de aplicación utilizando los componentes de encabezado y pie de página, lo que significa que estarán presentes en cada página de nuestra aplicación. La única parte que se cambiará es la que se insertará en la salida del enrutador (consulte " The Application Shell " en el sitio web de Angular para obtener más información).

Agregar un Jumbotron Bootstrap

Según los documentos de Bootstrap :

"Un Jumbotron es un componente liviano y flexible que, opcionalmente, puede extender toda la ventana gráfica para mostrar mensajes de marketing clave en su sitio".

Agreguemos un componente Jumbotron a nuestra página de inicio. Abra el src/app/home/home.component.htmlarchivo y agregue:

div  h1Angular Bootstrap Demo/h1  p    This demo shows how to integrate Bootstrap 4 with Angular 7    /p  a href="" role="button"View tutorial/a/div

La .jumbotronclase se utiliza para crear un Bootstrap Jumbotron.

Agregar un componente de lista: usar una tabla Bootstrap

Ahora creemos un componente a lista de datos del servicio de datos y usemos una tabla Bootstrap 4 para mostrar datos tabulares.

Primero, abra el src/app/contact-list/contact-list.component.tsarchivo e inyecte el servicio de datos, luego llame al getContacts()método para obtener datos cuando se inicialice el componente:

import { Component, OnInit } from '@angular/core';import { DataService } from '../data.service';@Component({  selector: 'app-contact-list',  templateUrl: './contact-list.component.html',  styleUrls: ['./contact-list.component.css']})export class ContactListComponent implements OnInit {  contacts;  selectedContact;  constructor(public dataService: DataService) { }  ngOnInit() {    this.contacts = this.dataService.getContacts();      }  public selectContact(contact){    this.selectedContact = contact;  }}

Agregamos dos variables contactsy selectedContactque contienen el conjunto de contactos y el contacto seleccionado. Y un selectContact()método que asigna el contacto seleccionado a la selectedContactvariable.

Abra el src/app/contact-list/contact-list.component.htmlarchivo y agregue:

div  table    thead      tr        th#/th        thName/th        thEmail/th        thActions/th      /tr    /thead    tbody      tr *ngFor="let contact of contacts"        td{{ contact.id }}/td        td {{ contact.name }}/td        td {{ contact.email }}/td        td          button (click)="selectContact(contact)" Show details/button        /td      /tr    /tbody  /table  div *ngIf="selectedContact"      div        # {{selectedContact.id}}      /div      div        h4{{selectedContact.name}}/h4        p          {{selectedContact.description}}        /p          /div    /div/div

Simplemente recorremos la contactsmatriz y mostramos los detalles de cada contacto y un botón para seleccionar un contacto. Si se selecciona el contacto, se mostrará una tarjeta Bootstrap 4 con más información.

Esta es la definición de una tarjeta de los documentos de Bootstrap 4 :

“Una tarjeta es un contenedor de contenidos flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Si está familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros paneles, pozos y miniaturas antiguos. Una funcionalidad similar a esos componentes está disponible como clases modificadoras para tarjetas”.

Usamos las clases .tabley .table-hoverpara crear tablas con estilo Bootstrap, las clases , y .cardpara .card-blockcrear tarjetas. (Para obtener más información, consulte Tablas y tarjetas )..card-title.card-text

Agregar un componente de creación: uso de clases y controles de formulario Bootstrap

Ahora agreguemos un formulario a nuestro contact-createcomponente. Primero, necesitamos importar el FormsModuleen nuestro módulo de aplicación principal. Abra el src/app/app.module.tsarchivo, importe FormsModuledesde @angular/formsy agréguelo a la importsmatriz:

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { FormsModule } from '@angular/forms';/* ... */@NgModule({  declarations: [  /* ... */  ],  imports: [    BrowserModule,    AppRoutingModule,    FormsModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

A continuación, abra el src/app/contact-create/contact-create.component.tsarchivo y reemplace su contenido con lo siguiente:

import { Component, OnInit } from '@angular/core';import { DataService } from '../data.service';@Component({  selector: 'app-contact-create',  templateUrl: './contact-create.component.html',  styleUrls: ['./contact-create.component.css']})export class ContactCreateComponent implements OnInit {  contact : {id, name, description, email} = {id: null, name: "", description: "", email: ""};  constructor(public dataService: DataService) { }  ngOnInit() {  }  createContact(){    console.log(this.contact);    this.dataService.createContact(this.contact);    this.contact = {id: null, name: "", description: "", email: ""};  }}

A continuación, abra el src/app/contact-create/contact-create.component.htmlarchivo y agregue el siguiente código:

div  div    div      div        form          div            label for="id"ID/label            input [(ngModel)]="contact.id" type="text" name="id" aria-describedby="idHelp" placeholder="Enter ID"            smallEnter your contact’s ID/small            label for="name"Contact Name/label            input [(ngModel)]="contact.name" type="text" name="name" aria-describedby="nameHelp" placeholder="Enter your name"            smallEnter your contact’s name/small            label for="email"Contact Email/label            input [(ngModel)]="contact.email" type="text" name="email" aria-describedby="emailHelp"              placeholder="Enter your email"            smallEnter your contact’s email/small            label for="description"Contact Description/label            textarea [(ngModel)]="contact.description" name="description" aria-describedby="descHelp"                      /textarea            smallEnter your contact’s description/small          /div        /form        button (click)="createContact()"Create contact/button      /div    /div  /div/div

Usamos las .form-groupclases .form-controlpara crear un formulario con estilo Bootstrap (consulte " Formularios " para obtener más información).

Usamos la ngModeldirectiva para vincular los campos del formulario a la variable de los componentes. Para que el enlace de datos funcione correctamente, debe asignar un nombre a cada campo del formulario.

Lectura recomendada : Gestión de puntos de interrupción de imágenes con Angular por Tamas Piros

Ejecutando la aplicación angular

En este paso, ejecutemos la aplicación y veamos si todo funciona como se esperaba. Dirígete a tu terminal, asegúrate de estar en la carpeta raíz de tu proyecto y luego ejecuta el siguiente comando:

$ ng serve

Se ejecutará un servidor de desarrollo de recarga en vivo desde la https://localhost:4200dirección. Abra su navegador web y navegue hasta esa dirección. Deberías ver la siguiente interfaz:

Si navega a la página Contactos, debería ver:

Si navega a la página "Crear contacto", debería ver:

Conclusión

En este tutorial, hemos visto cómo crear una aplicación Angular simple con una interfaz Bootstrap. Puede encontrar el código fuente completo en GitHub y ver el ejemplo en vivo aquí .

(dm, il)Explora más en

• Aplicaciones
• CSS
• Angular
• javascript