HTML, JavaScript e CSS constituem a base do desenvolvimento front-end. O Angular destaca-se como uma das estruturas JavaScript mais utilizadas no desenvolvimento de aplicações do lado do cliente. Paralelamente, o Bootstrap é uma das estruturas de interface de usuário (UI) mais populares disponíveis.
As estruturas (frameworks) são conjuntos pré-elaborados de códigos, ferramentas e bibliotecas que oferecem uma metodologia estruturada para a criação de aplicações. Tanto o Bootstrap quanto o Angular se enquadram nessa categoria.
Este artigo visa definir cada uma dessas estruturas, analisar os benefícios da sua combinação e demonstrar como as integrar para desenvolver aplicações visualmente atraentes e altamente funcionais.
O que é Bootstrap?
Bootstrap é um conjunto de ferramentas front-end, de uso gratuito, focado na criação de aplicações com prioridade para dispositivos móveis. Esta estrutura, construída em HTML, CSS e JavaScript, oferece uma vasta coleção de componentes de código reutilizáveis, que os desenvolvedores podem aplicar em diversas partes dos seus projetos.
A estrutura inclui templates de design para diversas funcionalidades, como botões, modais, carrosséis de imagens, tabelas, sistemas de navegação, entre outros. O Bootstrap dispõe de extensa documentação, facilitando a sua utilização.
O que é AngularJS?
AngularJS é uma estrutura JavaScript que expande a sintaxe do HTML além da sua função como linguagem de marcação convencional. Esta estrutura introduz recursos como a ligação de dados (data binding), que permite aos desenvolvedores evitar o processo complexo de criação de páginas web responsivas usando HTML puro.
O AngularJS utiliza o padrão Model-View-Controller (MVC), que estabelece uma clara separação entre a lógica da aplicação e a sua interface de usuário. Os desenvolvedores podem utilizar o AngularJS para construir aplicações web de página única, plataformas de redes sociais, sites de comércio eletrónico, sistemas de gestão de conteúdos e muito mais.
Vantagens de Utilizar Bootstrap em Angular
- Componentes de UI Pré-construídos: Evita a necessidade de desenvolver do zero elementos como barras de navegação, botões, carrosséis e cartões, pois o Bootstrap já oferece componentes pré-fabricados. Os desenvolvedores podem, assim, dedicar mais tempo à funcionalidade, enquanto o Bootstrap cuida da estrutura e estilo básicos.
- Personalizável: Apesar dos componentes pré-construídos fornecerem um ponto de partida, eles são altamente personalizáveis. É possível alterar diversos elementos, como imagens e texto, para adaptar cada componente às necessidades específicas da aplicação.
- Responsividade: A diversidade de dispositivos utilizados para navegar na web é vasta. O Bootstrap assegura que as aplicações web sejam responsivas e adaptáveis a diferentes tamanhos de tela, desde smartphones a computadores, sem necessidade de desenvolvimento específico para cada um.
- Consistência no Estilo: Uma aplicação web eficaz deve manter uma aparência consistente em todas as páginas. A utilização dos elementos e componentes do Bootstrap auxilia a atingir esse objetivo.
- Comunidade Robusta: O Bootstrap beneficia de uma grande comunidade de desenvolvedores, o que resulta em vastos recursos, documentação detalhada e suporte constante.
Pré-requisitos
#1. Node.js
Este é um ambiente de execução JavaScript que permite executar código JavaScript fora do navegador. Pode verificar a versão atual do seu Node.js utilizando o seguinte comando:
node -v
Se o Node.js não estiver instalado, pode fazer o download e instalação a partir do site oficial.
#2. Node Package Manager (NPM)
O NPM é o gestor de pacotes que irá gerenciar todas as dependências necessárias para a sua aplicação Angular. O NPM é instalado automaticamente quando instala o Node.js. Pode verificar a versão atual utilizando o comando:
npm -v
#3. Angular CLI
Esta é a ferramenta de linha de comandos que usaremos para criar a estrutura básica de uma aplicação Angular. Pode instalar o Angular CLI utilizando o comando:
npm install -g @angular/cli
#4. Ambiente de Desenvolvimento Integrado (IDE)
É o local onde irá escrever o seu código. Pode usar qualquer IDE compatível com JavaScript, como o Visual Studio Code ou o Webstorm.
Como Integrar o Bootstrap no Angular
Agora que temos todas as ferramentas necessárias, podemos proceder à criação da nossa aplicação Angular. Existem duas abordagens principais para integrar o Bootstrap no Angular: 1. Instalação do Bootstrap usando o NPM; 2. Utilização de links CDN.
Abordagem 1: Utilização do NPM
Podemos instalar toda a biblioteca Bootstrap no nosso projeto utilizando o NPM. Siga estes passos:
Passo 1: Utilize o Angular CLI para configurar a estrutura básica da aplicação.
Uma aplicação Angular típica é composta por múltiplos ficheiros. Vamos nomear a nossa aplicação de angular-bootstrap-mockup (pode escolher qualquer nome). Utilize o seguinte comando para configurar a sua aplicação:
ng new angular-bootstrap-mockup
Será questionado acerca das seguintes opções:
- “Gostaria de adicionar roteamento Angular? (s/n)” – digite s
- “Qual formato de folha de estilo gostaria de usar?” – selecione CSS
Depois da configuração, deverá ver algo semelhante a isto no seu terminal:
Navegue até ao projeto criado, e avance para o passo 2, utilizando o seguinte comando:
cd angular-bootstrap-mockup
Abra o projeto no seu editor de código. A estrutura do projeto deverá ser semelhante à seguinte:
Passo 2: Instale o Bootstrap e os ícones Bootstrap.
Execute o seguinte comando para instalar ambos:
npm install bootstrap bootstrap-icons
Passo 3: Inclua o Bootstrap no ficheiro angular.json.
Localize o ficheiro angular.json na pasta raiz do seu projeto e altere as seguintes linhas:
"styles": [ "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/bootstrap-icons/font/bootstrap-icons.css", "src/styles.scss" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]
Passo 4: Instale o ng-bootstrap.
O ng-bootstrap é uma coleção de componentes Angular UI, construídos sobre a estrutura Bootstrap. Os diferentes componentes desta biblioteca são projetados para funcionar com o AngularJS.
Utilize o seguinte comando para instalar:
npm install @ng-bootstrap/ng-bootstrap
Passo 5: Modifique o ficheiro app.module.ts para incluir o NgbModule.
Altere o conteúdo do ficheiro app.module.ts com o seguinte:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
providers: [],
bootstrap: [
AppComponent,
],
})
export class AppModule { }
Passo 5: Modifique app.component.ts.
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private modalService: NgbModal) {
}
public open(modal: any): void {
this.modalService.open(modal);
}
}
Passo 6: Adicione elementos Bootstrap ao ficheiro app.component.html.
Existem diversos componentes disponíveis no site do Bootstrap. Vamos criar uma barra de navegação simples e adicionar dois botões.
Altere o conteúdo do ficheiro app.component.html para o seguinte:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li>
</ul>
<button type="button" class="btn btn-primary btn-lg">Angular</button>
<button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>
Passo 7: Execute a sua aplicação.
Utilize o seguinte comando:
ng serve
Quando o servidor de desenvolvimento Angular estiver a correr, pode abrir http://localhost:4200/ no seu navegador.
Abordagem 2: Adicionar Bootstrap ao Angular utilizando links CDN
Esta abordagem permite fazer a ligação direta à rede de distribuição de conteúdos (CDN), que armazena os ficheiros do Bootstrap.
Podemos criar vários botões utilizando esta abordagem num novo projeto. Siga os seguintes passos:
Passo 1: Crie um novo projeto Angular.
Vamos nomear a nossa aplicação de angular-bootstrap-cdn (pode escolher qualquer nome).
Execute o seguinte comando:
ng new angular-bootstrap-cdn
Assim que a instalação estiver concluída, mude de diretório e abra o projeto num editor de código. Pode utilizar o seguinte comando para entrar no diretório do projeto:
cd angular-bootstrap-cdn
Passo 2: Inclua o link CDN no ficheiro index.html.
Localize o ficheiro src/index.html e adicione o link CDN dentro da secção head.
<head>
<!-- ... -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- ... -->
</head>
Passo 3: Adicione código Bootstrap ao ficheiro app.component.html.
Localize o ficheiro src/app/app.component.html.
Pode adicionar o seguinte código ao ficheiro:
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
Passo 4: Execute a sua aplicação.
ng serve
Perguntas Frequentes
Pode usar o Bootstrap e o Angular Material em conjunto no mesmo projeto?
Sim. Tanto o Bootstrap quanto o Angular Material são bibliotecas de UI criadas para o mesmo propósito. No entanto, deve evitar a utilização de ambas as bibliotecas no mesmo componente, pois poderá ocorrer conflitos. Por exemplo, se quiser criar uma página de login, escolha apenas uma das bibliotecas, baseando a sua escolha nos componentes disponíveis.
Qual versão do Bootstrap é compatível com o Angular?
A versão atual do Bootstrap, no momento em que este artigo foi escrito, é a v5.3.0-alpha2. Por outro lado, a versão atual do Angular é a versão 15. Qualquer versão a partir do Bootstrap 4 é compatível com diversas versões do Angular. No entanto, é sempre recomendado verificar a documentação nos sites oficiais do Bootstrap e do Angular, ao combinar ambas as tecnologias.
Que tipo de projetos pode construir utilizando Bootstrap e Angular?
Não existem limitações na natureza das aplicações que pode criar usando o Bootstrap e o Angular. Pode usar ambas as estruturas para desenvolver aplicações de página única, sites de comércio eletrónico, plataformas sociais, dashboards e painéis administrativos. Também pode usar o Angular com o framework Ionic para criar aplicações móveis.
O Angular é uma estrutura JavaScript ou TypeScript?
O Angular é uma estrutura JavaScript. No entanto, o Angular é escrito em TypeScript, um superconjunto de JavaScript. O TypeScript introduz novas funcionalidades que não estão disponíveis em JavaScript. Assim, pode utilizar o Angular em aplicações JavaScript e TypeScript.
Conclusão
Agora está capacitado para utilizar duas das estruturas front-end mais populares, o Angular e o Bootstrap, para desenvolver diversas aplicações.
A escolha da abordagem dependerá do caso de uso específico e do tipo de aplicação que pretende desenvolver.
Apesar da abordagem CDN parecer mais simples, ela também apresenta algumas desvantagens. A maior delas é a segurança da sua aplicação, uma vez que hackers podem utilizar CDNs para enviar scripts maliciosos para o seu site.
A instalação do Bootstrap utilizando o NPM oferece um maior controlo sobre o código incluído na sua aplicação. No entanto, esta abordagem pode ser mais demorada, uma vez que necessita de fazer o download de todas as dependências.
Veja como adicionar o Bootstrap a uma aplicação React.