Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

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

2,262 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×