30 / 68
POST
DO DIEGO
DEV WEB
30
Cargo:
Criador do
Tableless.com.br e
coordenador de
Front-end na Locaweb
Contato:
diego@
tabeless.com.br
Twitter:
@diegoeis
DIEGO EIS
m dos princípios do AngularJS
é levar a parte da lógica
das funcionalidades dos
componentes direto para o
HTML. Para fazer isso, é preciso
usar suas diretivas. Elas ajudam
a diminuir código de JS para executar
tarefas simples, como uma funcionalidade
de abas, por exemplo.
Inicie as abas
Este é umHTML simples, com o código
HTML básico para formatar o visual e acomodar o
conteúdo das abas. Veja o código funcional aqui:
KWWS MVíGGOH QHW WDEOHOHVV D FFSVY
.
Nesse momento, ainda não há nenhuma
funcionalidade, só estilo CSS. Vamos começar
inserindo as diretivas a partir de agora.
Insira as diretivas
A primeira diretiva se chama ‘ng-app’. Ela inicia
uma app AngularJS, avisando que aquele pedaço
de HTML é o escopo da aplicação. Neste exemplo,
inseri ‘ng-app’ no meu div ‘.container’, que é o div
que engloba tudo, mas geralmente o ‘ng-app’ é
colocado na tag ‘html’.
Feito isso, insira duas diretivas no HTML que
fazem as abas: ‘ng-click’ e ‘ng-class’.
à $ED
à $ED
A diretiva ng-click detecta o clique no elemento
e executa algum comportamento. Nesse caso,
HOH YDL GHíQLU XPD YDUL£YHO FRQWH[WXDO FKDPDGD
‘tab’, atribuindo o valor 1, 2 ou 3 para essa variável,
dependendo da aba clicada.
A diretiva ng-class permite adicionar uma
classe dinamicamente no elemento por meio de
uma expressão. O valor que adicionamos ali é
uma condicional que adiciona a classe ACTIVE em
determinado valor da variável tab.
Agora, para fechar, adicione mais uma
diretiva chamada ‘ng-show’ aos conteúdos das
respectivas tabs. A diretiva ng-show (https://
docs.angularjs.org/api/ng/directive/ngShow)
mostra ou esconde o elemento baseado em
alguma expressão ou condicional.
<div ng-show="tab == 1">conteúdo tab 1</div>
<div ng-show="tab == 2">conteúdo tab 2</div>
Perceba que o AngularJS já começa a fazer
a mágica aqui. O ‘ng-click’ cria a variável ‘tab’ e
DWULEXL XP YDORU 2 ØQJ FODVVÙ YHULíFD HVVD YDUL£YHO
se for igual ao valor determinado, ele adiciona a
classe. O ‘ng-show’ já faz o trabalho de mostrar ou
não os conteúdos de acordo com a aba clicada,
YHULíFDQGR R YDORU DWXDO GD YDUL£YHO ØWDEÙ 6HP
JavaScript, baby! Veja o exemplo completo neste
link:
KWWS MVíGGOH QHW WDEOHOHVV D FFSVY
.
Faltou uma diretiva. Trata-se da ‘ng-init’
( https://docs.angularjs.org/api/ng/directive/ngInit ),
TXH DYDOLD H PRGLíFD XPD H[SUHVV¥R GHQWUR GR
escopo atual – que, neste exemplo, é tudo o que
está no ‘ng-app’. Coloque na tag HTML este atributo:
‘ng-init="tab=1"’. Isso vai fazer comque a primeira tab
seja iniciada logo no load do documento.
U
[
O EXEMPLO
DAS TABS E
OUTROS TESTES
APLICADOS
AQUI PODEM
SER VISTOS NO
LINK BIT.LY/
ANGULARTESTS
]
PORDENTRO
DOANGULARJS
LW
REVISTA LOCAWEB