HTML, JavaScript e CSS estão entre os pilares do desenvolvimento front-end. Angular é uma das estruturas JavaScript mais usadas para criar aplicativos do lado do cliente. Por outro lado, o Bootstrap está entre as estruturas de interface do usuário (UI) mais populares.
Frameworks são uma coleção de um conjunto pré-criado de código, ferramentas e bibliotecas que oferecem uma maneira predefinida de construir aplicativos. Bootstrap e Angular são ambos frameworks.
Este artigo definirá cada estrutura e discutirá os benefícios de combinar as duas tecnologias e como combiná-las para criar aplicativos visualmente atraentes e poderosos.
últimas postagens
O que é Bootstrap?
O Bootstrap é um kit de ferramentas front-end gratuito para criar aplicativos mobile-first. Essa estrutura HTML, CSS e JavaScript possui uma grande coleção de partes reutilizáveis de código que os desenvolvedores podem usar em várias partes de seus projetos.
Essa estrutura possui modelos de design para vários recursos, como botões, modais, carrosséis de imagens, tabelas, navegações e muito mais. O Bootstrap possui extensa documentação para facilitar o uso.
O que é AngularJS?
AngularJS é uma estrutura JavaScript que estende a sintaxe do HTML além de uma linguagem de marcação regular. Essa estrutura apresenta recursos como vinculação de dados que permitem aos desenvolvedores evitar o complexo processo de criação de páginas da Web responsivas ao usar HTML.
AngularJS emprega o framework model-view-controller (MVC), onde há uma clara separação entre a lógica do aplicativo e a interface do usuário. Os desenvolvedores podem usar o AngularJS para criar aplicativos da Web de página única, aplicativos de redes sociais, plataformas de comércio eletrônico, sistemas de gerenciamento de conteúdo e muito mais.
Benefícios de usar Bootstrap em Angular
- Componentes de IU pré-construídos: você não precisa criar barras de navegação, botões, carrosséis e cartões do zero, pois o Bootstrap tem partes de código pré-construídas que você pode usar. Assim, os desenvolvedores podem se concentrar mais na funcionalidade, enquanto o Bootstrap cuida da estrutura básica e do estilo.
- Personalizável: os componentes pré-construídos fornecem código clichê. No entanto, você pode personalizar o código enquanto estiver em seu aplicativo. Por exemplo, se você pegar um cartão do Bootstrap, poderá alterar vários elementos, como imagens e texto, para atender às suas necessidades.
- Responsivo: os usuários modernos da web navegam em vários dispositivos, de smartphones e tablets a computadores. Você não precisa criar um aplicativo para cada tamanho de tela, pois o Bootstrap fornece aplicativos da Web responsivos.
- Traz um estilo consistente: um bom aplicativo da Web deve ter uma sensação e aparência consistentes em diferentes páginas. O uso de elementos e componentes do Bootstrap pode ajudá-lo a atingir esse objetivo.
- Comunidade forte: esta estrutura é repleta de muitos recursos e documentação forte e é apoiada por muitos desenvolvedores.
Pré-requisitos
#1. Node.js
Este é um ambiente de tempo de execução JavaScript que você usará para executar o código JavaScript fora do navegador. Você pode verificar a versão atual do seu Node.js executando este comando;
nó -v
Você pode instalá-lo a partir do site oficial se não estiver instalado.
#2. Gerenciador de pacotes de nós (NPM)
O NPM gerenciará todos os pacotes associados necessários para seu aplicativo Angular. O NPM é instalado por padrão quando você instala o Node.js. Você pode verificar a versão atual usando este comando;
npm -v
#3. Angular CLI
É uma ferramenta de linha de comando que usaremos para criar a estrutura básica de um aplicativo Angular. Você pode instalar o Angular CLI usando este comando;
npm install -g @angular/cli
#4. Um Ambiente de Desenvolvimento Integrado (IDE)
É aqui que você escreverá seu código. Você pode usar qualquer IDE compatível com JavaScript, como Visual Studio Code ou Webstorm.
Como adicionar Bootstrap ao Angular
Agora temos todas as ferramentas necessárias para criar nosso aplicativo Angular. Existem duas abordagens principais para adicionar Bootstrap ao Angular; 1. Instalando o Bootstrap usando o NPM. 2. Usando links CDN
Abordagem 1: Usando NPM
Podemos instalar toda a biblioteca Bootstrap em nosso projeto usando o NPM. Siga esses passos;
Passo 1: Use o Angular CLI para configurar a estrutura básica do aplicativo
Um aplicativo Angular típico tem muitos arquivos. Vamos nomear nosso aplicativo angular-bootstrap-mockup (você pode dar ao seu aplicativo qualquer nome que lhe agrade). Use este comando para configurar seu aplicativo;
ng novo modelo de inicialização angular
Você será guiado por essas perguntas;
- Gostaria de adicionar roteamento Angular? (s/n) digite s
- Qual formato de folha de estilo você gostaria de usar? Selecione CSS
Depois que a configuração terminar, você terá algo semelhante a isso em seu terminal.
Navegue até o projeto criado e vá para a etapa 2. Você pode usar este comando;
cd angular-bootstrap-mockup
Abra o projeto em seu editor de código. A estrutura do projeto será a seguinte;
Etapa 2: instale os ícones bootstrap e bootstrap.
Execute este comando para instalar ambos;
npm install bootstrap bootstrap-icons
Etapa 3: Incluir o Bootstrap no arquivo angular.json
Localize o arquivo angular.json na pasta raiz do seu app e altere essas 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" ]
Etapa 4: instalar o ng-bootstrap
Ng-bootstrap é uma coleção de componentes Angular UI construídos sobre o framework Bootstrap. Os diferentes componentes desta biblioteca são projetados para trabalhar com AngularJS.
Use este comando para instalá-lo;
npm install @ng-bootstrap/ng-bootstrap
Etapa 5: Modifique app.module.ts para incluir NgbModule.
Altere o conteúdo do arquivo app.module.ts com isso;
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 {
}
Etapa 5: modificar 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);
}
}
Etapa 6: adicionar elementos Bootstrap ao arquivo app.component.html
Existem vários componentes para selecionar no site do Bootstrap. Vamos criar uma barra de navegação simples e adicionar dois botões.
Altere o conteúdo de app.component.html da seguinte maneira;
<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>
Etapa 7: execute seu aplicativo
Use este comando;
ng serve
Quando o desenvolvimento Angular é executado, você pode abrir http://localhost:4200/ em seu navegador.
Abordagem 2: Adicionar Bootstrap ao Angular usando links CDN
Essa abordagem permite vincular diretamente à rede de entrega de conteúdo (CDN) que armazena arquivos Bootstrap.
Podemos criar vários botões usando essa abordagem em um novo projeto. Siga esses passos;
Passo 1: Criar um novo projeto Angular
Vamos nomear nosso aplicativo como angular-bootstrap-cdn. (Você pode escolher qualquer nome).
Execute este comando;
ng new angular-bootstrap-cdn
Terminada a instalação, mude de diretório e abra seu projeto em um editor de código. Você pode usar este comando para entrar no diretório do projeto;
cd angular-bootstrap-cdn
Etapa 2: inclua o link CDN no arquivo index.html
Localize o arquivo src/index.html e o link CDN na seção head.
<head> ……. href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> ……… </head>
Etapa 3: adicione o código Bootstrap ao arquivo app.component.html
Localize o arquivo src/app/app.component.html.
Você pode adicionar esse código ao arquivo;
<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>
Etapa 4: execute seu aplicativo
ng servir
perguntas frequentes
Você pode usar Bootstrap e Angular Material juntos no mesmo projeto?
Sim. Bootstrap e Angular Material são bibliotecas de UI criadas para servir ao mesmo propósito. No entanto, você não deve usar ambas as bibliotecas ao lidar com o mesmo componente, pois é provável que elas travem. Por exemplo, se você deseja criar uma página de login, escolha uma delas com base nos componentes disponíveis.
Qual versão do Bootstrap é compatível com Angular?
A versão atual do Bootstrap, no momento em que este livro foi escrito, é v5.3.0-alpha2. Por outro lado, a versão atual do Angular é Angular 15. Qualquer coisa do Bootstrap 4 é compatível com várias versões do Angular. No entanto, sempre verifique a documentação nos sites oficiais Bootstrap e Angular ao combinar as duas tecnologias
Quais projetos você pode construir usando Bootstrap e Angular?
Não há limitação na natureza dos aplicativos que você pode criar usando Bootstrap e Angular. Você pode usar os dois para criar aplicativos de página única, sites de comércio eletrônico, plataformas sociais, painéis e painéis administrativos. Você também pode usar o Angular com a estrutura Ionic para criar aplicativos móveis.
Angular é uma estrutura JavaScript ou TypeScript?
Angular é uma estrutura JavaScript. No entanto, Angular é escrito em TypeScript, um superconjunto de JavaScript. TypeScript apresenta novas funcionalidades que não estão disponíveis em JavaScript. Assim, você pode usar Angular com aplicativos TypeScript e Angular.
Conclusão
Agora você pode usar confortavelmente duas das estruturas de front-end mais populares, Angular e Bootstrap, para criar vários aplicativos.
A escolha da abordagem dependerá do caso de uso e do tipo de aplicativo que você deseja criar.
Mesmo que a abordagem CDN pareça fácil, ela também tem várias desvantagens. O maior desafio é a segurança do seu aplicativo, pois os hackers podem usar CDNs para enviar scripts maliciosos para o seu site.
A instalação do Bootstrap usando o NPM oferece controle sobre o código incluído em seu aplicativo. No entanto, essa abordagem pode ser demorada, pois você precisa baixar todas as dependências.
Confira como adicionar o Bootstrap a um aplicativo React.