Introdução ao AngularJS com ASP.NET MVC 4

Note: This deck is in Portuguese

Apresentação sobre a microframework de javascript AngularJS e como a usar com ASP.NET MVC 4. O código das demonstrações está no github: https://github.com/danielcsgomes/AngularJS-NetPonto

Transcript

1. Introdução ao AngularJS com ASP.NET MVC Daniel Gomes http://netponto.org 32ª Reunião Lisboa - 25/08/2012
2. Daniel Gomes • Engenheiro de Software na Quidgest • Embaixador para Portugal no Geekli.st • ZCE, CSM @danielcsgomes www.danielcsgomes.com
3. Agenda • AngularJS – Demonstrações • AngularJS em Páginas Dinâmicas – Demonstração • AngularJS em Single Page Application (SPA) – Demonstração • Conclusões
4. Objetivos • Noções básicas de AnguarJS • Aptos a criar aplicações com AngularJS
5. AngularJS • Suporte nos diversos browsers • Implementa o Padrão de Desenho MVC • Extende o vocabulário HTML • Data-Binding bidirecional
6. AngularJS
7. AngularJS O que vamos ver: – Diretivas – Escopo – MVC – Data-Binding – Validações – Expressões – Filtros
8. Diretivas • Componentes Reutilizáveis • Extende o vocabulário HTML • AngularJS é um conjunto de Diretivas
9. Escopo • Estruturado Hierarquicamente • Escuta Expressões ($watch) • Propaga eventos ($emit, $broadcast)
10. AngularJS Escopo
11. MVC • Controller – Javascript • Model – Escopo, inputs do formulário • Routing – Definido no “module” através do $routerProvider – html5Mode • View – HTML e CSS
12. Data-Binding • Bidirecional • Sincronização automática Model View
13. AngularJS Data-Binding
14. Validações • Tipos de validações imbutidas: – Text, checkbox, email, number, radio, url, textare • Diretivas imbutidas: – Required, pattern, minlenght, maxlenght, min, max • Validações costumizáveis • “novalidate”
15. AngularJS Validações
16. Expressões {{expressão}} • 2+1 • Utilizador.nome • 5*10 | currency
17. AngularJS Expressões
18. Filtros • Filtros imbutidos: – Currency, date, filter, json, limitTo, lowercase, number, orderBy, uppercase • Filtros customizáveis
19. AngularJS Filtros Costumizáveis
20. AngularJS em Páginas Dinâmicas • Contexto – Pesquisa em tempo real numa parte específica da aplicação – Pedido XMLHttpRequest (XHR)
21. AngularJS em Páginas Dinâmicas
22. AngularJS em Simple Page Application (SPA) • Contexto – Gestão de Processos – Operações CRUD – Pesquisa em tempo real – Pedidos XMLHttpRequest (XHR)
23. AngularJS em Single Page Application
24. O que não vimos • DI – Dependency Injection • Serviços • Teste Unitários • Internacionalização (I18n e L10n)
25. Conclusões • Fácil integração com ASP.NET MVC tanto em páginas dinâmicas como em SPA • Curva de aprendizagem rápida • Bem documentado e excelente API • Testável
26. Questões?
27. Referências AngularJS – http://www.angularjs.org/ AngularJS – Developr Guide – http://docs.angularjs.org/guide/ AngularJS - API – http://docs.angularjs.org/api/ Repositório com o código da apresentação – https://github.com/danielcsgomes/AngularJS-NetPonto
28. Patrocinador “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal
29. Patrocinadores “Silver”
30. Questões?
31. Próximas reuniões presenciais • 25/08/2012 – Agosto (Lisboa) • 22/09/2012 – Setembro (Lisboa) • 20/10/2012 – Outubro (Lisboa) 24/11/2012 – Novembro (Lisboa) Reserva estes dias na agenda! :)
32. Obrigado! Daniel Gomes me@danielcsgomes.com http://danielcsgomes.com @danielcsgomes Geekli.st/danielcsgomes Linkedin.com/in/danielcsgomes