Estilizando um aplicativo angular com Bootstrap

Caso você já tenha tentado construir um aplicativo da web com o Angular 7, é hora de aumentar ainda mais. Vamos ver como podemos integrar estilos CSS Bootstrap e arquivos JavaScript com um projeto Angular gerado usando a CLI Angular, e como usar controles e classes de formulário para criar belos formulários e como estilizar tabelas HTML usando estilos de tabela.

Para a parte Angular, criaremos um aplicativo simples do lado do cliente para criar e listar contatos. Cada contato tem um ID, nome, e-mail e descrição, e usaremos um serviço de dados simples que armazena os contatos em uma matriz TypeScript. Você pode usar uma API avançada na memória. (Confira “Um guia completo para roteamento em Angular”.)

Nota : Você pode obter o código-fonte deste tutorial neste repositório do GitHub e ver o exemplo ao vivo aqui.

Requisitos

Antes de começarmos a criar o aplicativo de demonstração, vamos ver os requisitos necessários para este tutorial.

Basicamente, você precisará do seguinte:

• Node.js e NPM instalados (você pode simplesmente acessar o site oficial e baixar os binários para o seu sistema),
• Familiaridade com TypeScript,
• Experiência de trabalho da Angular,
• Conhecimento básico de CSS e HTML.
  

Instalando a CLI Angular

Vamos começar instalando a versão mais recente do Angular CLI. No seu terminal, execute o seguinte comando:

 $ npm install -g @angular/cli

No momento da escrita, a v7.0.3 do Angular CLI está instalada. Se você já tiver a CLI instalada, verifique se tem a versão mais recente usando este comando:

 $ ng --version

Criando um projeto

Depois de instalar o Angular CLI, vamos usá-lo para gerar um projeto Angular 7 executando o seguinte comando:

 $ ng new angular-bootstrap-demo

A CLI perguntará então:

Gostaria de adicionar roteamento Angular?

Pressione Y. Em seguida, ele perguntará:

Qual formato de folha de estilo você gostaria de usar?

Escolha “CSS”.

Adicionando Bootstrap

Após criar o projeto, você precisa instalar o Bootstrap 4 e integrá-lo ao seu projeto Angular.

Primeiro, navegue dentro da pasta raiz do seu projeto:

 $ cd angular-bootstrap-demo

Em seguida, instale o Bootstrap 4 e o jQuery do npm:

 $ npm install --save bootstrap jquery

(Neste caso, bootstrap v4.2.1 e jquery v3.3.1 estão instalados.)

Por fim, abra o arquivo angular.json e adicione os caminhos de arquivo dos arquivos Bootstrap CSS e JS, bem como jQuery, às matrizes de styles e scripts no destino 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" ] },

Confira como adicionar o Bootstrap a um projeto Angular 6 para obter opções sobre como integrar o Bootstrap com o Angular.

Adicionando um serviço de dados

Após criar um projeto e adicionar o Bootstrap 4, criaremos um serviço Angular que será usado para fornecer alguns dados de demonstração para exibir em nossa aplicação.

No seu terminal, execute o seguinte comando para gerar um serviço:

 $ ng generate service data

Isso criará dois arquivos src/app/data.service.spec.ts e src/app/data.service.ts .

Abra src/app/data.service.ts e substitua seu conteúdo pelo seguinte:

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

Adicionamos um array de contacts com alguns contatos de demonstração, um método getContacts() que retorna os contatos e um createContact() que anexa um novo contato ao array de contacts .

Adicionando componentes

Após criar o serviço de dados, em seguida, precisamos criar alguns componentes para nossa aplicação. No seu terminal, execute:

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

Em seguida, adicionaremos esses componentes ao módulo de roteamento para permitir a navegação em nosso aplicativo. Abra o arquivo src/app/app-routing.module.ts e substitua seu conteúdo pelo seguinte:

 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 a propriedade redirectTo do caminho do roteador para redirecionar os usuários para a página inicial quando visitam nosso aplicativo.

Adicionando componentes de cabeçalho e rodapé

Em seguida, vamos criar os componentes de cabeçalho e rodapé:

 $ ng generate component header $ ng generate component footer

Abra o arquivo src/app/header/header.component.html e adicione o seguinte código:

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

Uma barra de navegação será criada com o Bootstrap 4 e usaremos a diretiva routerLink para vincular a diferentes componentes.

Use as .navbar , .navbar-expand{-sm|-md|-lg|-xl} e .navbar-dark para criar barras de navegação Bootstrap. (Para mais informações sobre barras de navegação, confira a documentação do Bootstrap em “Navbar”.

Em seguida, abra o arquivo src/app/header/header.component.css e adicione:

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

Em seguida, abra o arquivo src/app/footer/footer.component.html e adicione:

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

Abra o arquivo src/app/footer/footer.component.css e adicione:

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

Em seguida, abra o arquivo src/app/app.component.html e substitua seu conteúdo pelo seguinte:

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

Estamos criando um shell de aplicativo usando os componentes de cabeçalho e rodapé, o que significa que eles estarão presentes em todas as páginas do nosso aplicativo. A única parte que será alterada é a que será inserida na tomada do roteador (confira “The Application Shell” no site da Angular para mais informações).

Adicionando um Jumbotron Bootstrap

De acordo com os documentos do Bootstrap:

“Um Jumbotron é um componente leve e flexível que pode opcionalmente estender toda a janela de visualização para exibir as principais mensagens de marketing em seu site.”

Vamos adicionar um componente Jumbotron à nossa página inicial. Abra o arquivo src/app/home/home.component.html e adicione:

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

A classe .jumbotron é usada para criar um Bootstrap Jumbotron.

Adicionando um componente de lista: usando uma tabela de bootstrap

Agora vamos criar um componente para listar dados do serviço de dados e usar uma tabela Bootstrap 4 para exibir dados tabulares.

Primeiro, abra o arquivo src/app/contact-list/contact-list.component.ts e injete o serviço de dados e chame o método getContacts() para obter dados quando o componente for inicializado:

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

Adicionamos duas variáveis contacts e selectedContact que contém o conjunto de contatos e o contato selecionado. E um método selectContact() que atribui o contato selecionado à variável selectedContact .

Abra o arquivo src/app/contact-list/contact-list.component.html e adicione:

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

Simplesmente percorremos a matriz de contacts e exibimos os detalhes de cada contato e um botão para selecionar um contato. Se o contato for selecionado, um cartão Bootstrap 4 com mais informações será exibido.

Esta é a definição de um cartão dos documentos do Bootstrap 4:

“Um cartão é um contêiner de conteúdo flexível e extensível. Inclui opções para cabeçalhos e rodapés, uma ampla variedade de conteúdo, cores de fundo contextuais e opções de exibição poderosas. Se você estiver familiarizado com o Bootstrap 3, os cartões substituem nossos antigos painéis, poços e miniaturas. Funcionalidade semelhante a esses componentes está disponível como classes modificadoras para cartas.”

Usamos as .table e .table-hover para criar tabelas no estilo Bootstrap, as .card , .card-block , .card-title e .card-text para criar cartões. (Para mais informações, confira Tabelas e Cartões.)

Adicionando um componente de criação: usando controles e classes de formulário do Bootstrap

Vamos agora adicionar um formulário ao nosso componente contact-create . Primeiro, precisamos importar o FormsModule em nosso módulo de aplicação principal. Abra o arquivo src/app/app.module.ts , importe FormsModule de @angular/forms e adicione-o ao array 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 { }

Em seguida, abra o arquivo src/app/contact-create/contact-create.component.ts e substitua seu conteúdo pelo seguinte:

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

Em seguida, abra o arquivo src/app/contact-create/contact-create.component.html e adicione o seguinte código:

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

Usamos as .form-group , .form-control para criar um formulário no estilo Bootstrap (confira “Formulários” para mais informações).

Usamos a diretiva ngModel para vincular os campos do formulário à variável dos componentes. Para que a vinculação de dados funcione corretamente, você precisa dar um nome a cada campo de formulário.

Leitura recomendada : Gerenciando pontos de interrupção de imagem com Angular por Tamas Piros

Executando o aplicativo angular

Nesta etapa, vamos executar o aplicativo e ver se tudo funciona conforme o esperado. Vá para o seu terminal, verifique se você está na pasta raiz do seu projeto e execute o seguinte comando:

 $ ng serve

Um servidor de desenvolvimento de recarga ao vivo será executado a partir do endereço https://localhost:4200 . Abra seu navegador da web e navegue até esse endereço. Você deverá ver a seguinte interface:

Se você navegar até a página Contatos, deverá ver:

Se você navegar até a página "Criar contato", deverá ver:

Conclusão

Neste tutorial, vimos como criar um aplicativo Angular simples com uma interface Bootstrap. Você pode encontrar o código-fonte completo no GitHub e ver o exemplo ao vivo aqui.