Exemplo com AngularJS, Bootstrap e jQuery

exemplo-abj

Este é um pequeno exemplo do que se pode fazer com estas três ferramentas (AngularJS, Bootstrap e jQuery) na forma de um exercício de programação para praticar o que aprendi nos cursos de AngularJS que estão disponíveis no Codecademy e Codeschool (sim, fiz ambos!).

Antes de mais nada, algumas explicações bem resumidas sobre o que são as ferramentas:

  • AngularJS é um framework open-source para a desenvolvimento de aplicações web. Foi criado pelo Google e hoje é mantido por este e uma comunidade de desenvolvedores independentes;
  • Bootstrap é um framework open-source para HTML, CSS e JavaScript desenvolvido pelo Twitter para a criação rápida e do zero de sítios web responsivos ou móveis e
  • jQuery é uma biblioteca em JavaScript para a manipulação dos elementos HTML. Acrescenta recursos como animação, tratamento de eventos e AJAX em uma API simplificada.

Para facilitar a manutenção eu condensei a página em três arquivos*:

  • exemplo-abj.html — A página HTML propriamente dita da página, para facilitar usei exemplo “justified-nav” do Bootstrap como modelo.
  • exemplo-abj.css — O arquivo de estilo com algumas pequenas mudanças que fiz no CSS do Bootstrap.
  • exemplo-abj.js — O código e um pouco do conteúdo (eu sei que deveria estar em um quarto arquivo).

Baixe os arquivos no seu computador, abra o HTML com seu navegador web predileto e depois divirta-se e aprenda com os comentários no código.

Os demais arquivos estão na Internet — as bibliotecas em seus respectivos repositórios, a fonte Raleway no Google Fonts, as capturas de tela aqui no WordPress e o matagal de fundo no meu estoque particular. 🙂

(*) Mas eu sei muito bem que na vida real devemos deixar tudo em arquivos pequenos para facilitar ao máximo a manutenção.

Anúncios

7 comentários sobre “Exemplo com AngularJS, Bootstrap e jQuery

  1. Pingback: Exemplo com AngularJS, Bootstrap e jQuery - Peguei do

  2. Pingback: Um outro exemplo de AngularJS | giovannireisnunes

  3. Pingback: Dois Anos! | giovannireisnunes

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s