Stilizarea unei aplicații unghiulare cu Bootstrap

În cazul în care ați încercat deja să construiți o aplicație web cu Angular 7, este timpul să o ridicați. Să vedem cum putem integra stilurile CSS Bootstrap și fișierele JavaScript cu un proiect Angular generat folosind CLI-ul Angular și cum să folosim controalele și clasele de formular pentru a crea forme frumoase și cum să stilăm tabelele HTML folosind stiluri de tabel.

Pentru partea Angular, vom crea o aplicație simplă pe partea clientului pentru crearea și listarea contactelor. Fiecare contact are un ID, nume, e-mail și descriere, iar noi vom folosi un serviciu de date simplu care stochează contactele într-o matrice TypeScript. În schimb, puteți utiliza un API avansat în memorie. (Consultați „Un ghid complet pentru rutarea în unghiular”).

Notă : Puteți obține codul sursă al acestui tutorial din acest depozit GitHub și puteți vedea exemplul live aici.

Cerințe

Înainte de a începe să creăm aplicația demo, să vedem cerințele necesare pentru acest tutorial.

Practic, veți avea nevoie de următoarele:

• Node.js și NPM instalate (puteți pur și simplu să mergeți pe site-ul oficial și să descărcați binarele pentru sistemul dvs.),
• Familiaritate cu TypeScript,
• Experiență de lucru a Angular,
• Cunoștințe de bază CSS și HTML.
  

Instalarea Angular CLI

Să începem prin a instala cea mai recentă versiune de Angular CLI. În terminalul dvs., executați următoarea comandă:

 $ npm install -g @angular/cli

La momentul scrierii, v7.0.3 a Angular CLI este instalat. Dacă aveți deja instalat CLI-ul, vă puteți asigura că aveți cea mai recentă versiune utilizând această comandă:

 $ ng --version

Crearea unui proiect

Odată ce ați instalat Angular CLI, să-l folosim pentru a genera un proiect Angular 7, rulând următoarea comandă:

 $ ng new angular-bootstrap-demo

Apoi CLI vă va întreba:

Doriți să adăugați rutare unghiulară?

Apăsați Y. În continuare, vă va întreba:

Ce format de foaie de stil ați dori să utilizați?

Alegeți „CSS”.

Adăugarea Bootstrap

După crearea proiectului, trebuie să instalați Bootstrap 4 și să îl integrați cu proiectul dvs. Angular.

Mai întâi, navigați în folderul rădăcină al proiectului:

 $ cd angular-bootstrap-demo

Apoi, instalați Bootstrap 4 și jQuery din npm:

 $ npm install --save bootstrap jquery

(În acest caz, bootstrap v4.2.1 și jquery v3.3.1 sunt instalate.)

În cele din urmă, deschideți fișierul angular.json și adăugați căile fișierelor pentru fișierele Bootstrap CSS și JS, precum și jQuery la matricele de styles și scripts de sub ținta de build :

 "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" ] },

Aflați cum să adăugați Bootstrap la un proiect Angular 6 pentru opțiuni despre cum să integrați Bootstrap cu Angular.

Adăugarea unui serviciu de date

După crearea unui proiect și adăugarea Bootstrap 4, vom crea un serviciu Angular care va fi folosit pentru a furniza câteva date demonstrative pentru a le afișa în aplicația noastră.

În terminalul dvs., rulați următoarea comandă pentru a genera un serviciu:

 $ ng generate service data

Acest lucru va crea două fișiere src/app/data.service.spec.ts și src/app/data.service.ts .

Deschideți src/app/data.service.ts și înlocuiți conținutul acestuia cu următoarele:

 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); } }

Adăugăm o matrice de contacts cu câteva contacte demonstrative, o metodă getContacts() care returnează contactele și un createContact() care atașează un contact nou la matricea de contacts .

Adăugarea de componente

După crearea serviciului de date, în continuare trebuie să creăm câteva componente pentru aplicația noastră. În terminalul dvs., rulați:

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

În continuare, vom adăuga aceste componente la modulul de rutare pentru a permite navigarea în aplicația noastră. Deschideți fișierul src/app/app-routing.module.ts și înlocuiți-i conținutul cu următorul:

 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 { }

Folosim proprietatea redirectTo a căii routerului pentru a redirecționa utilizatorii către pagina de pornire atunci când vizitează aplicația noastră.

Adăugarea componentelor antet și subsol

În continuare, să creăm componentele antet și subsol:

 $ ng generate component header $ ng generate component footer

Deschideți fișierul src/app/header/header.component.html și adăugați următorul cod:

 <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Angular Bootstrap Demo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" routerLink="/home">Home</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/contact-list">Contacts</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/contact-create">Create</a> </li> </ul> </div> </nav>

O bară de navigare va fi creată cu Bootstrap 4 și vom folosi directiva routerLink pentru a face legătura la diferite componente.

Utilizați .navbar , .navbar-expand{-sm|-md|-lg|-xl} și .navbar-dark pentru a crea bare de navigare Bootstrap. (Pentru mai multe informații despre barele de navigare, consultați documentația Bootstrap pe „Navbar”.

Apoi, deschideți fișierul src/app/header/header.component.css și adăugați:

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

Apoi, deschideți fișierul src/app/footer/footer.component.html și adăugați:

 <footer> <p class="text-xs-center">© Copyright 2019. All rights reserved.</p> </footer>

Deschideți fișierul src/app/footer/footer.component.css și adăugați:

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

Apoi, deschideți fișierul src/app/app.component.html și înlocuiți-i conținutul cu următorul:

 <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>

Creăm un shell de aplicație utilizând componentele antet și subsol, ceea ce înseamnă că acestea vor fi prezente pe fiecare pagină a aplicației noastre. Singura parte care va fi schimbată este ceea ce va fi inserat în priza routerului (consultați „The Application Shell” pe site-ul web Angular pentru mai multe informații).

Adăugarea unui Jumbotron Bootstrap

Conform documentelor Bootstrap:

„Un Jumbotron este o componentă ușoară, flexibilă, care poate extinde opțional întreaga zonă de vizualizare pentru a prezenta mesajele cheie de marketing pe site-ul dumneavoastră.”

Să adăugăm o componentă Jumbotron pe pagina noastră de pornire. Deschideți fișierul src/app/home/home.component.html și adăugați:

 <div class="jumbotron"> <h1>Angular Bootstrap Demo</h1> <p class="lead"> This demo shows how to integrate Bootstrap 4 with Angular 7 </p> <a class="btn btn-lg btn-primary" href="" role="button">View tutorial</a> </div>

Clasa .jumbotron este folosită pentru a crea un Jumbotron Bootstrap.

Adăugarea unei componente de listă: Utilizarea unui tabel Bootstrap

Acum să creăm o componentă în listă de date din serviciul de date și să folosim un tabel Bootstrap 4 pentru a afișa datele tabulare.

Mai întâi, deschideți fișierul src/app/contact-list/contact-list.component.ts și injectați serviciul de date, apoi apelați metoda getContacts() pentru a obține date atunci când componenta este inițializată:

 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; } }

Am adăugat două variabile contacts și selectedContact care dețin setul de contacte și contactul selectat. Și o metodă selectContact() care atribuie contactul selectedContact variabilei SelectContact.

Deschideți fișierul src/app/contact-list/contact-list.component.html și adăugați:

 <div class="container"> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let contact of contacts"> <td>{{ contact.id }}</td> <td> {{ contact.name }}</td> <td> {{ contact.email }}</td> <td> <button class="btn btn-primary" (click)="selectContact(contact)"> Show details</button> </td> </tr> </tbody> </table> <div class="card text-center" *ngIf="selectedContact"> <div class="card-header"> # {{selectedContact.id}} </div> <div class="card-block"> <h4 class="card-title">{{selectedContact.name}}</h4> <p class="card-text"> {{selectedContact.description}} </p> </div> </div> </div>

Pur și simplu parcurgem matricea de contacts și afișăm fiecare detalii de contact și un buton pentru a selecta un contact. Dacă contactul este selectat, va fi afișat un card Bootstrap 4 cu mai multe informații.

Aceasta este definiția unui card din documentele Bootstrap 4:

„Un card este un container de conținut flexibil și extensibil. Include opțiuni pentru anteturi și subsoluri, o mare varietate de conținut, culori de fundal contextuale și opțiuni de afișare puternice. Dacă sunteți familiarizat cu Bootstrap 3, cardurile înlocuiesc vechile noastre panouri, puțuri și miniaturi. Funcționalități similare acelor componente sunt disponibile ca clase de modificatori pentru cărți.”

Folosim clasele .table și .table .table-hover pentru a crea tabele în stil Bootstrap, .card , .card-block , .card-title și .card-text pentru a crea carduri. (Pentru mai multe informații, consultați Mesele și cardurile.)

Adăugarea unei componente de creare: utilizarea controalelor și claselor de formulare Bootstrap

Să adăugăm acum un formular la componenta noastră contact-create . În primul rând, trebuie să importăm FormsModule în modulul nostru principal de aplicație. Deschideți fișierul src/app/app.module.ts , importați FormsModule din @angular/forms și adăugați-l în matricea de imports :

 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 { }

Apoi, deschideți fișierul src/app/contact-create/contact-create.component.ts și înlocuiți-i conținutul cu următorul:

 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: ""}; } }

Apoi, deschideți fișierul src/app/contact-create/contact-create.component.html și adăugați următorul cod:

 <div class="container"> <div class="row"> <div class="col-sm-8 offset-sm-2"> <div> <form> <div class="form-group"> <label for="id">ID</label> <input [(ngModel)]="contact.id" type="text" name="id" class="form-control" placeholder="Enter ID"> <small class="form-text text-muted">Enter your contact's ID</small> <label for="name">Contact Name</label> <input [(ngModel)]="contact.name" type="text" name="name" class="form-control" placeholder="Enter your name"> <small class="form-text text-muted">Enter your contact's name</small> <label for="email">Contact Email</label> <input [(ngModel)]="contact.email" type="text" name="email" class="form-control" placeholder="Enter your email"> <small class="form-text text-muted">Enter your contact's email</small> <label for="description">Contact Description</label> <textarea [(ngModel)]="contact.description" name="description" class="form-control"> </textarea> <small class="form-text text-muted">Enter your contact's description</small> </div> </form> <button class="btn btn-primary" (click)="createContact()">Create contact</button> </div> </div> </div> </div>

Folosim .form-group , .form-control pentru a crea un formular în stil Bootstrap (consultați „Formulare” pentru mai multe informații).

Folosim directiva ngModel pentru a lega câmpurile formularului la variabila componentelor. Pentru ca legarea datelor să funcționeze corect, trebuie să dați un nume fiecărui câmp de formular.

Lectură recomandată : Gestionarea punctelor de întrerupere a imaginii cu Angular de Tamas Piros

Rularea aplicației unghiulare

La acest pas, haideți să rulăm aplicația și să vedem dacă totul funcționează conform așteptărilor. Mergeți la terminalul dvs., asigurați-vă că vă aflați în folderul rădăcină al proiectului, apoi executați următoarea comandă:

 $ ng serve

Un server de dezvoltare live-reload va rula de la adresa https://localhost:4200 . Deschideți browserul web și navigați la adresa respectivă. Ar trebui să vedeți următoarea interfață:

Dacă navigați la pagina Contacte, ar trebui să vedeți:

Dacă navigați la pagina „Creați contact”, ar trebui să vedeți:

Concluzie

În acest tutorial, am văzut cum să creați o aplicație Angular simplă cu o interfață Bootstrap. Puteți găsi codul sursă complet pe GitHub și vedeți exemplul live aici.