Post on 05-Dec-2014
description
transcript
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
MVP ShowCast
Virtual Community Series
WEBCASTS
15 set
a09 out
2 0 1 4
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net)
#mvpbr #mvpshowcast
Organizado por MVPs com apoio da Microsoft
Programa MVP (mvp.microsoft.com)
Palestrante: Moderador:Web / One
ASP.NETDEV
ASP.NET SignalR + SPA com AngularJS
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)
Web / One ASP.NET
DEV
AngularJS + SignalR
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
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)
Web / One ASP.NET
DEV
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)
Web / One ASP.NET
DEV
Estrutura do Framework AngularJS
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
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)
Web / One ASP.NET
DEV
Demonstração AngularJS
Criando uma aplicação em AngularJS do Zero
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
Configuração do AngularJS
http://localhost/!#/contacts
Definição da App com suas dependências.
Definição de rotas da aplicação
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
Demonstração AngularJS
Configurando nossa aplicação
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
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)
Web / One ASP.NET
DEV
Demonstração AngularJS
Criando um controller
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
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)
Web / One ASP.NET
DEV
Demonstração AngularJS
Juntando tudo
+
© 2014, MVP ShowCast (mvpshowcast.azurewebsites.net) Programa MVP (mvp.microsoft.com)
Web / One ASP.NET
DEV
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)
Iniciativas da Microsoft
Premiação MVPA 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 MentorO 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 AcademyTreinamento gratuito da Microsoft oferecido por especialistas.www.microsoftvirtualacademy.com
Serviço de curadoria projetado para e mantido pela comunidade técnica.curah.microsoft.com
Curah!