Utilizando SignalR em aplicações SPA usando AngularJS, Bootstrap e HTML 5.

1. WEBCASTS
15
set
2 0 1 4
DEV Web / One ASP.NET
MVP ShowCast
Virtual Community Series
a
09
out
#mvpbr Organizado por MVPs com apoio da Microsoft #mvpshowcast
ASP.NET SignalR + SPA com AngularJS
Palestrante: Moderador:
DEV Web / One ASP.NET
Waldyr Felix
MVP de ASP.NET/IIS
Chief Consultant na FCamara
@WaldyrFelix
André Baltieri
MVP de ASP.NET/IIS
Community Manager & SDE
BR Soluções Integradas
Nível: 200
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net)
Programa MVP (mvp.microsoft.com)

2. DEV Web / One ASP.NET
AngularJS + SignalR
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

3. DEV Web / One ASP.NET
AngularJS é MVC
♦Model = Objeto JavaScript, pode vir do servidor
em formato JSON.
♦View = HTML puro e simples + CSS puro e
simples.
♦Controller = Arquivo JavaScript no padrão de
declaração do AngularJS
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

4. DEV Web / One ASP.NET
AngularJS é MVVM
♦ViewModel = Objeto JavaScript montado
exclusivamente para atender a necessidade da tela.
♦Bindings = Notação do AngularJS que liga um
elemento HTML ao ViewModel.
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

5. DEV Web / One ASP.NET
Estrutura do Framework AngularJS
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

6. DEV Web / One ASP.NET
Estrutura das Apps AngularJS
Aplicação a ser usada.
Controller a ser usado
Bindings
Definição do controller
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

7. DEV Web / One ASP.NET
Demonstração AngularJS
Criando uma aplicação em AngularJS do Zero
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

8. DEV Web / One ASP.NET
Configuração do AngularJS
Definição de
http://localhost/!#/contacts
rotas da aplicação
Definição da App
com suas dependências.
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

9. DEV Web / One ASP.NET
Demonstração AngularJS
Configurando nossa aplicação
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

10. DEV Web / One ASP.NET
Controllers do AngularJS
Dependência do controller
Variáveis do controller
Método do controller
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

11. DEV Web / One ASP.NET
Demonstração AngularJS
Criando um controller
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

12. DEV Web / One ASP.NET
Criando um Hub no SignalR
Herdar da classe Hub
Nomear o Hub
Comunicando com o client
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

13. DEV Web / One ASP.NET
Demonstração AngularJS
Juntando tudo
+
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

14. DEV Web / One ASP.NET
Dúvidas?
Waldyr Felix
MVP de ASP.NET/IIS
Chief Consultant na FCamara
Twitter: @WaldyrFelix
Blog: waldyrfelix.net
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)

15. Iniciativas da Microsoft
Premiação MVP
A premiação Microsoft Most Valuable Professional (MVP) é uma forma da Microsoft
agradecer aos líderes independentes da comunidade que compartilham sua paixão,
experiência técnica e conhecimento prático dos produtos da Microsoft com outros.
mvp.microsoft.com
Programa MVP Mentor
O Programa MVP Mentor conecta estudantes que querem aprender mais sobre
tecnologias Microsoft com especialistas independentes: os MVPs da Microsoft.
mvp.microsoft.com/en-us/MVP-mentor.aspx
Microsoft Virtual Academy
Treinamento gratuito da Microsoft
oferecido por especialistas.
www.microsoftvirtualacademy.com
Curah!
Serviço de curadoria projetado para
e mantido pela comunidade técnica.
curah.microsoft.com
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)