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çõ...
O que eu ganho
com isso ?
• Velocidade
• Baixo consumo de banda
• Alta disponibilidade do servidor
• Perfeito para mobile
...
Binding
Este recurso “liga” um
determinado objeto javascript a
um elemento html.
De forma que uma alteração no
valor do el...
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á {{...
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 ...
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çã...
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 (D...
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 c...
Validações
As validações são diretivas colocadas
nos inputs e permitem executar
validações básicas. As diretivas
disponíve...
Exemplo de Rotas e Validações
http://angularrotasvalidacoes.codeplex.com/
Just It!
Ildyone Martins
@devmartins
Angularjs.org
Próximos SlideShares
Carregando em…5
×

AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas

2.229 visualizações

Publicada em

Palestra de AngularJS explicando recursos deste framework para formulários e como utiliza-los.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.229
No SlideShare
0
A partir de incorporações
0
Número de incorporações
12
Ações
Compartilhamentos
0
Downloads
33
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas

  1. 1. AngularJS 1.0.8 Binding, Eventos, Ajax, Validações e Rotas
  2. 2. 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.
  3. 3. O que eu ganho com isso ? • Velocidade • Baixo consumo de banda • Alta disponibilidade do servidor • Perfeito para mobile • Aplicações ajax padronizadas
  4. 4. 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.
  5. 5. O que preciso para usar o binding do Angular? • Diretiva (atributo colocado nos elementos html) • Uma Expressão (Opcional)
  6. 6. Binding Simples http://angularbindingsimples.codeplex.com/
  7. 7. Uma outra opção de binding da expressão Utilize a diretiva ng-bind-template <div class="mensagem" ng-bind-template="Olá {{visitante}}"></div>
  8. 8. Binding Ng-Binding-Template http://angularbindingatributo.codeplex.com/
  9. 9. 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)
  10. 10. Exemplo de Aplicação Angular http://angularestrutura.codeplex.com/
  11. 11. 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.
  12. 12. Exemplo de Evento http://angularevento.codeplex.com/
  13. 13. 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.
  14. 14. Exemplo de Ajax http://angularajax.codeplex.com/
  15. 15. 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.
  16. 16. 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.
  17. 17. Exemplo de Rotas e Validações http://angularrotasvalidacoes.codeplex.com/
  18. 18. Just It! Ildyone Martins @devmartins Angularjs.org

×