© 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!