AngularJS 1.0.8

Binding, Eventos, Ajax, Validações e Rotas

O Que É ? Framework javascript para desenvolvimento de aplicações SPA (Single Page Application)

O Que é SPA ? São aplicações web de uma única página (embora possa apresentar mais de uma), que uma vez carregada pelo browser, se comunica com o servidor de aplicação usando por exemplo AJAX.

O que eu ganho com isso ?

• Velocidade • Baixo consumo de banda • Alta disponibilidade do servidor • Perfeito para mobile • Aplicações ajax padronizadas

Binding

Este recurso “liga” um determinado objeto javascript a um elemento html. De forma que uma alteração no valor do elemento é refletido automaticamente no objeto e vice-versa.

O que preciso para usar o binding do Angular?

• Diretiva (atributo colocado nos elementos html) • Uma Expressão (Opcional)

Binding Simples

http://angularbindingsimples.codeplex.com/

Uma outra opção de binding da expressão

Utilize a diretiva ng-bind-template

<div class="mensagem" ng-bind-template="Olá {{visitante}}"></div>

Binding Ng-Binding-Template

http://angularbindingatributo.codeplex.com/

Estrutura de uma aplicação Angular

• Model (É um objeto Javascript) • View (Seu html) • Controller (Código javascript que conterá o código da aplicação)

Exemplo de Aplicação Angular

http://angularestrutura.codeplex.com/

Eventos

Eventos são utilizados através das diretivas. Para clique, ng-click. Basta adiciona-la ao elemento e criar a função de resposta no controller.

Exemplo de Evento

http://angularevento.codeplex.com/

Para utilizar ajax nas nossas apps é necessário declarar um parâmetro de nome http no Controller. O angular irá injetar (DI) o objeto para que ele possa ser usado.

Exemplo de Ajax

http://angularajax.codeplex.com/

Rotas Para fazer uso de rotas é necessário criar um módulo que configura o angular, informando nossas rotas, templates e controllers que serão responsáveis por cada view. É necessário informar o nome desse módulo na diretiva ng-app e criar uma tag que será o container do conteúdo das views, tendo esta a diretiva ng-view.

Validações

As validações são diretivas colocadas nos inputs e permitem executar validações básicas. As diretivas disponíveis são: ng-required, ng-minlength, ng-maxlength e ng-pattern (Aceita uma regex). A diretiva ng-show é usada para avaliar uma expressão, caso ela seja verdadeira, uma mensagem de erro é exibida.

Exemplo de Rotas e Validações

http://angularrotasvalidacoes.codeplex.com/

Just It!

Ildyone Martins @devmartins

Angularjs.org