Diseñar una aplicación angular con Bootstrap

 

 

 

  • SmashingConf UX y diseño, Amberes 2024
  • Advanced Modern CSS Masterclass, with Manuel Matuzović

  • Índice
    1. Requisitos
    2. Instalación de CLI angular
    3. Creando un proyecto
    4. Agregar arranque
    5. Agregar un servicio de datos
    6. Agregar componentes
    7. Agregar componentes de encabezado y pie de página
    8. Agregar un Jumbotron Bootstrap
    9. Agregar un componente de lista: usar una tabla Bootstrap
    10. Agregar un componente de creación: uso de clases y controles de formulario Bootstrap
    11. Ejecutando la aplicación angular
    12. Conclusión

    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: "[email protected]"}, {id: 2, name: "Contact 002", description: "Contact 002 des", email: "[email protected]"}, {id: 3, name: "Contact 003", description: "Contact 003 des", email: "[email protected]"}, {id: 4, name: "Contact 004", description: "Contact 004 des", email: "[email protected]"} ]; 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 ". Elchat Directorio de chats en español

     

    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:

    ( Vista previa grande )

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

    ( Vista previa grande )

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

    ( Vista previa grande )

    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





    Tal vez te puede interesar:

    1. ¿Qué es Redux? Una guía para el diseñador
    2. Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
    3. Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
    4. Componentes de diseño en React

    Diseñar una aplicación angular con Bootstrap

    Diseñar una aplicación angular con Bootstrap

    SmashingConf UX y diseño, Amberes 2024 Advanced Modern CSS Masterclass, with Manuel Matuzović Índice Re

    programar

    es

    https://pseint.es/static/images/programar-disenar-una-aplicacion-angular-con-bootstrap-970-0.jpg

    2024-04-04

     

    Diseñar una aplicación angular con Bootstrap
    Diseñar una aplicación angular con Bootstrap

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20