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.
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.
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