AngularJS: Série de Bolso (parte 1)

angularjs-large

O framework AngularJS é uma das ferramentas mais famosas na construção de aplicações SPA (Single Page Application), que são basicamente sistemas de uma única página – o usuário não fará uma requisição completa ao servidor para cada página.

Serão transitados apenas conteúdos parciais. Vamos pensar numa estrutura de site com um menu lateral, cabeçalho, conteúdo e rodapé.

figs-requisicao

O layout pode ser representado pela “fig A”, com os elementos citados sendo os blocos cinzas.

A “fig B” representa as sessões ativas quando trocamos de página em uma aplicação web comum. Ao clicar num link deste blog, por exemplo, você fará a requisição ao servidor de todas as áreas para serem atualizadas.

Esse cenário era extremamente comum antes da difusão do Ajax, que permite executar requisições para enviar e receber dados parciais. Ao digitar um nome na busca do Facebook, por exemplo, você obviamente não está enviando e recebendo todo o conteúdo da página, mas um fragmento de dados.

Porém, mesmo com o uso de Ajax, o trabalho convencional na web é o modelo de enviar e receber toda a página. Se você implementar um link e não fizer nenhum tratamento onclick, o padrão será executado, transitando todos os dados.

Na “fig C” é apresentado o modelo com que uma SPA trabalha por padrão. Apenas a área de conteúdo será trafegada nas requisições. Por isso temos a impressão que estamos em “uma única página” – não notamos a mudança do site todo, apenas de áreas parciais.

Porém, não se preocupe, você não está impedido de fazer modificações em tempo real nas outras áreas (menu, rodapé, cabeçalho). Se seu menu é dinâmico, nada impede que você execute uma requisição e atualize os itens exibidos ao usuário em qualquer momento.

Angular vale a pena afinal?

Falando do ponto de vista de mercado, sim. Aplicações SPA vêm ganhando mercado, se tornando uma tendência e Angular é um framework completo para te ajudar.

Nada te impede de fazer uma SPA com javascript puro, com jQuery ou outras ferramentas, apenas estamos apresentando uma opção com finalidade específica 🙂

Sobre a série de bolso

Vou produzir mais artigos de caráter técnico sobre AngularJS 1.x. Este post foi uma introdução teórica ao Angular e SPA em si. Nos próximos artigos teremos mais código e menos filosofia de desenvolvimento, menos sopa de letrinhas e jargões bonitos.

Mas e o Angular 2?

Muita hora nessa calma. Angular 2 já está disponível para uso, mas ainda há mercado, suporte e atualizações para o AngularJS 1.x. Enquanto o AngularJS já garantiu seu nome na história, Angular 2 vem com muita coisa nova (foi rescrito do zero!) e muitas melhorias.

Entretanto, Angular 2 será assunto para outra série de bolso, visto que atualmente desenvolvo com AngularJS 1.x e tenho muito mais experiência para compartilhar sobre ele.

É isso ai! Não é só codar, tem que pensar!

Continua na parte 2.

Autor: Doná

Um piracicabano médio, amante do desenvolvimento web.

2 pensamentos em “AngularJS: Série de Bolso (parte 1)”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *