O AngularJS é um framework Javascript mantido por uma equipe da Google, que tem como uma das suas principais funções extender funcionalidades aplicadas ao HTML, fazendo com que possamos manipular elementos do DOM de forma simples e ao mesmo tempo deixando nossas aplicações com mais interatividade com os usuários.

A ideia do AngularJS é criar aplicações web usando o conceito SPA (Single Page Application), que fornece ao usuário a mesma sensação de aplicações desktop, pois o usuário não vê o famoso refresh da página quando executa alguma ação, isso graças ao ajax que é fortemente usado no desenvolvimento de aplicações web com o AngularJS.

Ao usarmos o AngularJS para criarmos nossos projetos ganhamos inumeras vantagens. A primeira vantagem é a economia de dados trafegados, pois ao executarmos uma ação via ajax usando o conceito SPA não recarregamos toda a página que pode conter links externos ou não estar fazendo o uso correto do cache de arquivos, fazendo assim toda a requisição novamente e consequentemente consumindo mais dados. Existem inumeras vantagens ao se usar o AngularJS, como a possibilidade de criarmos atributos HTML ou DIRETIVAS de forma simples e rápida por exemplo, mas isso vamos deixar para os próximos posts.

ESTRUTURA BÁSICA

Para criarmos uma estrutura básica e darmos os primeiros passos com o AngularJS, primeiro nós temos que acessar este link e copiarmos o código da página e colarmos em uma arquivo .js para que possamos inclui-lo em nossa estrutura HTML.

A estrutura fica assim:

estrutura básica do AngularJS

Estrutura básica

É exatamente a estrutura do HTML, recomendável a versão do HTML5, adicionado apenas o framework AngularJS no final do font, antes de fecharmos a tag body.

DOIS EXEMPLOS RÁPIDOS

Agora que temos um arquivo HTML com o framework AngularJS lincado e pronto para uso, veremos dois exemplos rápidos que nos mostrará um parte do poder do AngularJS para usarmos em nossas aplicações.

  • Two-way Data Binding

Primeiro, vamos alterar um conteúdo do HTML instantaneamente através do two-way data binding de uma maneira muito rápida e com pouco código. Dentro do arquivo HTML criado, nós iremos inserir um input text e uma tag p, e quando digitarmos algo no input, o angular irá transmitir o conteúdo do input para a tag p. O código fica como na imagem abaixo.

primeiro exemplo do angularjs

Exemplo 1

Primeiro nós inserimos em nosso HMTL a diretiva ng-app para informar ao browser que estamos em uma aplicação com o framework AngularJS. A diretiva está vazia, pois este exemplo não necessita de nenhum módulo e/ou controller.

A próxima mudança foi a diretiva ng-model que inserimos no input text para informar ao angular que temos um model, que no caso é nosso input chamado nome, para que ele possa realizar o two-way data binding entre o model e a view.

E por último temos a diretiva ng-if na tag p que verifica se o valor do model é vazio, se for, ele esconde a tag, caso o usuário digite algo no input ele irá mostrar a tag p e realizará o two-way data binding no {{nome}}.

  • Repetição de dados

Neste segundo exemplo, nós iremos realizar um laço de repetição em uma lista usando a diretiva ng-repeat. Altere o HTML que usamos no exemplo do anterior a adicione as novas diretivas usadas na imagem abaixo:

Repetição de dados do AngularJS

Repetição de dados.

No código acima nós usamos algumas diretivas que ainda não vimos e dois arquivos a mais, um deles é o jQuery e o outro é o nosso arquivo .js onde iremos criamos um módulo e um controller. Antes de mostrar como ficou o arquivo que contém o módulo e o controller, vamos analizar o código acima e ver o que mudou do exemplo anterior para este.

Primeiro, nossa diretiva ng-app agora tem um valor introducao, isso informa ao angular que nossa aplicação agora tem um módulo.

Segundo, nossa tag body agora contém a diretiva ng-controller informando ao angular que dentro do nosso módulo introducao nós temos um controller intro.

E por fim nos temos a diretiva ng-repeat em nossa lista. Essa é a diretiva responsável pelo laço de repetição que fizemos nas li de nossa lista ul informando que queremos listar todas as frutas que estão guardadas em nosso array do controller.

Vejamos agora como ficou nosso arquivo main.js:

main.js

Note que nós criamos uma variavel app que recebe nosso módulo introducao e logo em seguida nós criamos nosso controller intro que pertence ao nosso módulo que está guardado na nossa variável app e contém um array de frutas. Quando nós criamos um controller no angular, nós devemos informar um $scope que é responsável por fazer a ligação da nossa view com o nosso controller. Veja que ao criar o controller intro, nós passamos como segundo parametro uma função cujo o paramentro é o $scope e dentro do nosso controller criamos um array de frutas atribuído ao $scope para que possamos acessar este array na nossa view e realizar o laço de repetição.

Link de apoio aqui.

Posted by Gabriel Moraes

Criador e mantenedor do blog. Atuo na área de suporte à 4 anos e curso Análise e Desenvolvimento de Sistemas.