Artigos HTML e CSS AngularJS e Bootstrap: Desenvolva front-ends modernos e responsivos
Por que eu devo ler este artigo:Se você está interessado em desenvolvimento web moderno para os seus projetos, sem dúvidas o Bootstrap e o AngularJS se mostrarão ótimas opções. Pensando nisso, este artigo é destinado a pessoas que possuem alguma experiência em JavaScript e que desejam mergulhar mais a fundo na construção de aplicativos web que façam uso extensivo desses frameworks. Veremos, principalmente, como integrá-los através de exemplos práticos de usabilidade no que se refere às diretivas do AngularJS e do poderoso estilo estrutural do Bootstrap.

Um dos maiores desafios dos desenvolvedores que ingressam no mundo de programação front-end é entender como integrar diferentes frameworks, linguagens de programação e tecnologias em um só ambiente, que seja ao mesmo tempo funcional, organizado e padronizado. Tal trabalho se intensifica cada vez mais em detrimento da frequência com que os mesmos são atualizados, com que novas releases são lançadas ou até versões repletas de novas funcionalidades, incompatibilidades, bugs e depreciações.

A despeito da enorme lista que figura o hall da fama dos frameworks mais populares no mercado atual, o Bootstrap e o AngularJS conseguiram atingir um patamar de glória no que se refere à maturidade e confiabilidade para com toda a comunidade. A gama de projetos e empresas que os adotam cresce paralelamente à exigência de profissionais que entendam como manuseá-los, estendê-los e adaptá-los às diferentes realidades do software.

Uma boa maneira de aprender a utilizar esses frameworks é codificando, então vamos pular diretamente para a parte prática. Para mostrar como é fácil e ágil a utilização do Bootstrap em conjunto com o AngularJS, vamos começar criando um aplicativo bem simples, que nos permitirá inserir um nome a ser exibido na página em tempo real, e ir evoluindo o mesmo aos poucos, acrescentando funcionalidades de ambos os frameworks e analisando como se comportam. Ele vai demonstrar o poder da ligação de dados bidirecionais do AngularJS e da linguagem de templates do Bootstrap, o que dará ao aplicativo um pouco de estilo e estrutura. Mas antes de instalar nossos frameworks, precisamos criar nossa estrutura de pastas e o index.html, que será a base do nosso aplicativo.

Configurando o ambiente

Para criar nossa aplicação AngularJS + Bootstrap, primeiro crie um diretório chamado \DevMedia1 e um arquivo index.html dentro dele, e, depois, insira o código da Listagem 1 ao mesmo.

Listagem 1. Código inicial do index.html


        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>AngularJS + Bootstrap</title>
        </head>
        <body>
        </body>
        </html>

Essa é apenas uma página HTML padrão que será usada para conter as estruturas do AngularJS e do Bootstrap, além da importação dos arquivos necessários. Agora, crie um par de pastas dentro da pasta DevMedia1: css e js. Sua estrutura de pastas deve se parecer com a mostrada na Figura 1.

Estrutura de pastas no diretório DevMedia1
Figura 1. Estrutura de pastas no diretório DevMedia1

Instalando o Bootstrap

Você deve acessar a página de download do Bootstrap, disponível na seção Links, e baixá-lo, o que lhe dará um zip da sua versão mais recente, a qual inclui o CSS, fontes e arquivos JavaScript (no artigo foi usada a versão 3.3.7). As versões anteriores do Bootstrap incluíam um diretório de imagens, porém a última versão traz a alteração para fontes de ícones.

Para o nosso aplicativo, precisaremos apenas de um arquivo no momento, o css/bootstrap.min.css. Essa folha de estilos fornece toda a estrutura e também elementos para os principais componentes, como botões e alertas, características essas que deixaram o Bootstrap famoso. Copie-o para o diretório css do seu projeto e abra o arquivo index.html no seu editor de texto. I ...

Fim do trecho gratuito • continue abaixo
CONTEÚDO EXCLUSIVO

Desbloqueie toda a DevMedia

  • +2000 artigos e vídeos
  • +40 trilhas sobre Front-end, Back-end, IA e muito mais
  • +5000 exercícios práticos
  • Mentorias ao vivo individuais
até 50% OFF
A partir de
R$ 69 /mês
Assinar agora