Socket.io e AngularJS: Comunicação em tempo real

Fala galera, beleza?

No último post falei um pouco sobre refresh periódico com o AngularJS, quem ainda não leu ta perdendo, viu!? Corre e ler… =)

Após esse post, algumas pessoas falaram da questão do porquê não usei websocket!

“Pô Gabriel, websocket é muito melhor para um chat, não?”

Sim, concordo. Mas a intenção do post anterior era somente falar sobre refresh periódico. Assim, como vocês que mandam aqui mesmo, vamos falar um pouco sobre comunicação bidirecional? Oxe, e não é sobre websocket? Calma meu fi, leia o resto. =)

Já ouviu falar sobre o socket.io? É por causa dele que mencionei a comunicação bidirecional e não o websocket!

Leia Mais

AngularJS

AngularJS: Aplicação em tempo real – Refresh periódico

Fala galera, beleza?

Depois de um mês atípico (muito trabalho e organizando casamento) e um começo de mês com ombro deslocado, estou de volta para delírio de vocês heheheh (menos né?!).

Hoje vou falar sobre aplicações em tempo real utilizando o padrão ajax de atualização periódica (periodic refresh) e como o AngularJS pode nos ajudar a implementá-lo. Deixa eu te fazer uma pergunta, você gostaria de ficar apertando F5 para verificar se há uma nova notificação no Facebook? Ou se chegou aquele e-mail que você tanto esperava no Gmail? Eu acho que não, né?

A fim de tornar a experiência do usuário a mais agradável possível, muitas aplicações utilizam dados em tempo real (ou quase) e até criam uma certa dependência dessa tecnologia, pois sem ela jamais teriam se popularizado.
Leia Mais

Bower: Gerenciamento de pacotes no front-end

Fala galera, beleza?

Hoje vamos falar sobre gerenciamento de pacotes com o Bower. Uma das coisas que mais me irritou quando comecei a desenvolver front-end, usando somente módulos javascript, foi justamente o gerenciamento das dependências desses módulos. Como eu tenho raízes no Java, já estava acostumado a ter o Maven ou o Gradle gerenciando toda essa parafernália de libs para mim. Depois de muito trabalho manual, acessando sites e baixando os javascripts (ou pegando somente a referência) conheci finalmente o Bower.

Vale ressaltar que o Bower não é somente um gerenciador de módulos javascript, é também um gerenciador de dependências para front-end. Mas qual a diferença? A diferença é que para ele não interessa se tem javascript, css, html, imagem etc. dentro de um pacote, o que importa é que o código está encapsulado, normalmente acessível ao público e hospedado em um repositório git.

Leia Mais

AngularJS

AngularJS: Filtros

Fala galera, beleza?

Já precisou formatar algum dado para exibir para o usuário? Pensou em fazer o tratamento lá no backend ou criar uma função javascript para fazer o parse e exibir? Então, neste post vamos ver como o AngularJS trata essa questão com os filters.

Filtro

Os filtros são utilizados para fazer a formatação dos dados e exibi-los ao usuário. Uma definição bem simples, igual correr com medo dos caretas na Semana Santa lá no meu Brejim (quem é do interior cearense sabe do que eu estou falando!).

O AngularJS já possui alguns filtros padrão, como, por exemplo, currency para formatação de moeda e date para formatação de datas. Na API de Referência podemos verificar todos os filtros disponibilizados pelo framework.

Os filtros podem ser usados na view, no controller, na directive ou no service. Nós podemos também criar de maneira muito fácil o nosso próprio filtro.

Leia Mais

AngularJS

AngularJS: Rotas (ngRoute)

E aí galera, beleza?

Hoje falaremos um pouco sobre as rotas (ngRoute) do AngularJS. Nos posts anteriores falamos sobre controladores e serviços, se você ainda não está familiarizado com o framework recomendo a leitura.

Rotas – Para que servem?

Em aplicações que utilizam o conceito de single page, a navegação de uma página para outra é crucial. Quando a aplicação cresce e se torna mais complexa, precisamos encontrar uma maneira de gerenciar as páginas pelas quais o usuário vai navegar através da aplicação.

Poderíamos fazer toda a aplicação em um único arquivo e gerenciar o modo que a tela se comporta fazendo um gerenciamento de estados (por exemplo, escondendo e exibindo componentes), porém, já sabemos que fazer isso é completamente inviável para manutenção e saúde da aplicação (e da nossa querida saúde também!).

O módulo ngRoute é a solução que precisávamos. Ele nos permite gerenciar os templates a serem inseridos na view de acordo com a navegação do usuário. Ou seja, quando há uma ação de mudança de página, o módulo é capaz de “injetar” o template correspondente (desce mais um pouquinho que te mostro como faz).

Como configurar?

Leia Mais

%d blogueiros gostam disto: