Styling di un'applicazione angolare con Bootstrap

Nel caso in cui tu abbia già provato a creare un'applicazione web con Angular 7, è ora di fare un salto di qualità. Vediamo come possiamo integrare gli stili CSS Bootstrap e i file JavaScript con un progetto Angular generato utilizzando Angular CLI e come utilizzare i controlli e le classi dei moduli per creare bellissimi moduli e come applicare uno stile alle tabelle HTML utilizzando gli stili di tabella.

Per la parte angolare, creeremo una semplice applicazione lato client per creare ed elencare i contatti. Ogni contatto ha un ID, un nome, un'e-mail e una descrizione e utilizzeremo un semplice servizio dati che memorizza i contatti in un array TypeScript. Puoi invece utilizzare un'API in memoria avanzata. (Consulta "Una guida completa al routing in angolare".)

Nota : puoi ottenere il codice sorgente di questo tutorial da questo repository GitHub e vedere l'esempio dal vivo qui.

Requisiti

Prima di iniziare a creare l'applicazione demo, vediamo i requisiti necessari per questo tutorial.

Fondamentalmente, avrai bisogno di quanto segue:

• Node.js e NPM installati (puoi semplicemente andare al sito Web ufficiale e scaricare i binari per il tuo sistema),
• Familiarità con TypeScript,
• Esperienza lavorativa di Angular,
• Conoscenza di base di CSS e HTML.
  

Installazione della CLI angolare

Iniziamo installando l'ultima versione di Angular CLI. Nel tuo terminale, esegui il seguente comando:

 $ npm install -g @angular/cli

Nel momento in cui scrivo, è installata la v7.0.3 di Angular CLI. Se hai già installato la CLI, puoi assicurarti di avere l'ultima versione usando questo comando:

 $ ng --version

Creazione di un progetto

Dopo aver installato Angular CLI, usiamolo per generare un progetto Angular 7 eseguendo il comando seguente:

 $ ng new angular-bootstrap-demo

La CLI ti chiederà quindi:

Vuoi aggiungere il routing angolare?

Premi Y. Successivamente, ti chiederà:

Quale formato di foglio di stile vorresti utilizzare?

Scegli "CSS".

Aggiunta Bootstrap

Dopo aver creato il progetto, devi installare Bootstrap 4 e integrarlo con il tuo progetto Angular.

Innanzitutto, naviga all'interno della cartella principale del tuo progetto:

 $ cd angular-bootstrap-demo

Quindi, installa Bootstrap 4 e jQuery da npm:

 $ npm install --save bootstrap jquery

(In questo caso, sono installati bootstrap v4.2.1 e jquery v3.3.1 .)

Infine, apri il file angular.json e aggiungi i percorsi dei file CSS e JS Bootstrap, nonché jQuery agli array di styles e scripts sotto la destinazione di 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" ] },

Scopri come aggiungere Bootstrap a un progetto Angular 6 per le opzioni su come integrare Bootstrap con Angular.

Aggiunta di un servizio dati

Dopo aver creato un progetto e aggiunto Bootstrap 4, creeremo un servizio Angular che verrà utilizzato per fornire alcuni dati demo da visualizzare nella nostra applicazione.

Nel tuo terminale, esegui il seguente comando per generare un servizio:

 $ ng generate service data

Questo creerà due file src/app/data.service.spec.ts e src/app/data.service.ts .

Apri src/app/data.service.ts e sostituisci il suo contenuto con il seguente:

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

Aggiungiamo un array di contacts con alcuni contatti demo, un metodo getContacts() che restituisce i contatti e un createContact() che aggiunge un nuovo contatto all'array di contacts .

Aggiunta di componenti

Dopo aver creato il servizio dati, dobbiamo creare alcuni componenti per la nostra applicazione. Nel tuo terminale, esegui:

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

Successivamente, aggiungeremo questi componenti al modulo di routing per consentire la navigazione nella nostra applicazione. Apri il file src/app/app-routing.module.ts e sostituisci il suo contenuto con il seguente:

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

Utilizziamo la proprietà redirectTo del percorso del router per reindirizzare gli utenti alla home page quando visitano la nostra applicazione.

Aggiunta di componenti di intestazione e piè di pagina

Quindi, creiamo i componenti di intestazione e piè di pagina:

 $ ng generate component header $ ng generate component footer

Apri il file src/app/header/header.component.html e aggiungi il codice seguente:

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

Verrà creata una barra di navigazione con Bootstrap 4 e useremo la direttiva routerLink per collegarci a diversi componenti.

Usa le .navbar , .navbar-expand{-sm|-md|-lg|-xl} e .navbar-dark per creare barre di navigazione Bootstrap. (Per ulteriori informazioni sulle barre di navigazione, consulta la documentazione di Bootstrap su "Navbar".

Quindi, apri il file src/app/header/header.component.css e aggiungi:

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

Quindi, apri il file src/app/footer/footer.component.html e aggiungi:

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

Apri il file src/app/footer/footer.component.css e aggiungi:

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

Quindi, apri il file src/app/app.component.html e sostituisci il suo contenuto con il seguente:

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

Stiamo creando una shell dell'applicazione utilizzando i componenti di intestazione e piè di pagina, il che significa che saranno presenti in ogni pagina della nostra applicazione. L'unica parte che verrà modificata è quella che verrà inserita nell'uscita del router (per ulteriori informazioni, consultare "The Application Shell" sul sito Web di Angular).

Aggiunta di un Jumbotron Bootstrap

Secondo i documenti Bootstrap:

"Un Jumbotron è un componente leggero e flessibile che può estendere facoltativamente l'intero viewport per mostrare i messaggi di marketing chiave sul tuo sito".

Aggiungiamo un componente Jumbotron alla nostra home page. Apri il file src/app/home/home.component.html e aggiungi:

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

La classe .jumbotron viene utilizzata per creare un Bootstrap Jumbotron.

Aggiunta di un componente elenco: utilizzo di una tabella Bootstrap

Ora creiamo un dato componente-elenco dal servizio dati e utilizziamo una tabella Bootstrap 4 per visualizzare i dati tabulari.

Innanzitutto, apri il file src/app/contact-list/contact-list.component.ts e inserisci il servizio dati, quindi chiama il metodo getContacts() per ottenere i dati quando il componente viene inizializzato:

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

Abbiamo aggiunto due variabili contacts e selectedContact che contiene l'insieme di contatti e il contatto selezionato. E un metodo selectContact() che assegna il contatto selezionato alla variabile selectedContact .

Apri il file src/app/contact-list/contact-list.component.html e aggiungi:

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

Passiamo semplicemente in rassegna l'array di contacts e visualizziamo i dettagli di ciascun contatto e un pulsante per selezionare un contatto. Se il contatto è selezionato, verrà visualizzata una Bootstrap 4 Card con ulteriori informazioni.

Questa è la definizione di una carta da Bootstrap 4 docs:

“Una carta è un contenitore di contenuti flessibile ed estensibile. Include opzioni per intestazioni e piè di pagina, un'ampia varietà di contenuti, colori di sfondo contestuali e potenti opzioni di visualizzazione. Se hai familiarità con Bootstrap 3, le schede sostituiscono i nostri vecchi pannelli, pozzi e miniature. Funzionalità simili a quelle componenti sono disponibili come classi modificatori per le carte.

Usiamo le .table e .table-hover per creare tabelle in stile Bootstrap, le .card , .card-block , .card-title e .card-text per creare carte. (Per ulteriori informazioni, consulta Tabelle e Carte.)

Aggiunta di un componente di creazione: utilizzo dei controlli e delle classi dei moduli Bootstrap

Aggiungiamo ora un modulo al nostro componente contact-create . Innanzitutto, dobbiamo importare FormsModule nel nostro modulo dell'applicazione principale. Apri il file src/app/app.module.ts , importa FormsModule da @angular/forms e aggiungilo all'array 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 { }

Quindi, apri il file src/app/contact-create/contact-create.component.ts e sostituisci il suo contenuto con il seguente:

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

Quindi, apri il file src/app/contact-create/contact-create.component.html e aggiungi il codice seguente:

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

Usiamo le .form-group , .form-control per creare un form in stile Bootstrap (controlla “Moduli” per maggiori informazioni).

Usiamo la direttiva ngModel per associare i campi del modulo alla variabile dei componenti. Affinché l'associazione dati funzioni correttamente, è necessario assegnare un nome a ciascun campo del modulo.

Lettura consigliata : Gestione dei punti di interruzione dell'immagine con Angular di Tamas Piros

Esecuzione dell'applicazione angolare

A questo punto, eseguiamo l'applicazione e vediamo se tutto funziona come previsto. Vai al tuo terminale, assicurati di essere nella cartella principale del tuo progetto, quindi esegui il seguente comando:

 $ ng serve

Un server di sviluppo con ricarica in tempo reale verrà eseguito dall'indirizzo https://localhost:4200 . Apri il tuo browser web e vai a quell'indirizzo. Dovresti vedere la seguente interfaccia:

Se accedi alla pagina Contatti, dovresti vedere:

Se accedi alla pagina "Crea contatto", dovresti vedere:

Conclusione

In questo tutorial, abbiamo visto come creare una semplice applicazione Angular con un'interfaccia Bootstrap. Puoi trovare il codice sorgente completo su GitHub e vedere l'esempio dal vivo qui.