AngularJS do jeito certo: uma abordagem pensando em Angular 2

A próxima versão do AngularJS, que vem sendo chamada de Angular 2 pela comunidade, está bem próxima do lançamento trazendo grandes mudanças: a morte dos controllers e do $scope, e maior foco nas diretivas e nos Web Components.

AngularJS

Porém, o Angular 1 ainda tem muita energia pra queimar e muitas empresas ainda estão começando projetos do zero usando as versões 1.x. Nesse post vou mostrar uma abordagem de como fazer uma aplicação completa (porém simples) utilizando Angular 1, mas já pensando nas adaptações necessárias para o Angular 2.

Obs.: Esse post assume um conhecimento mínimo do framework AngularJS. Se você ainda não possui esse conhecimento, sugiro primeiro aprender um pouco mais antes de continuar. Este tutorial completo pode te ajudar.


A aplicação que vamos construir é um SPA bem simples: uma busca por usuários do GitHub e após a busca, devemos mostrar os repositórios do usuário. Dessa forma:

Exemplo de aplicação

É possível ver uma demonstração da versão final da aplicação aqui:
https://github-user-info.firebaseapp.com/


Lembrando que seguiremos uma abordagem baseada no Angular 2, ou seja: nada de controllers. A estrutura será baseada em 4 diretivas da seguinte forma:

Separação por diretivas
  1. github: diretiva “pai”, controla todas as outras internas
  2. search-user: diretiva que representa a busca por usuários
  3. user-info: diretiva que mostra as informações do usuário
  4. user-repo: diretiva que mostra os repositórios do usuário

Fazendo uma abordagem Top-Down, vamos começar pela estrutura básica da diretiva “pai”, a github (marcada em vermelho na imagem):

Com essa estrutura percebemos que ela bate exatamente com a descrição dada pela imagem, ou seja, a diretiva github contém 2 diretivas filhas: search-user e user-info. Vamos voltar depois nessa diretiva para complementar com o código que resta.

Focando agora na diretiva search-user (marcada em azul na imagem), a responsável pela busca de usuários, temos a seguinte estrutura:

A estrutura dela é bem simples: um template com um form de busca atribuindo o ngModel para username, além disso criamos um $scope.$watch para ficar lendo as mudanças nessa variável digitada pelo usuário.

Caso a variável seja undefined, iremos limpar as informações. Caso contrário, iremos fazer uma busca com esse valor, usando a API do GitHub.

O método linker, deverá ficar com essa cara:

Essa parte é complicada, mas não se assuste ainda. Nós precisamos injetar a diretiva pai para que ela possa transmitir os dados obtidos pela busca para as outras diretivas. Ou seja, se o resultado da busca for bem sucedida, vamos invocar setUser da diretiva pai para que possamos atribuir os dados obtidos pela API do GitHub, caso contrário vamos invocar clearUser para limpar os dados.

Voltando então na diretiva github, precisamos implementar esses dois métodos:

Repare que agora a variável user é passada para a diretiva (que ainda não criamos) user-info, isso será útil mais pra frente.

Além disso, com as atualizações necessárias, a diretiva search-user ficará assim:

Vamos criar então a terceira diretiva (das quatro que precisamos): a user-info, que será responsável pelo quadrado verde da imagem que representa os dados obtidos pela busca na API do GitHub.

Essa diretiva é bem simples, não tem nenhuma lógica, apenas templates. Repare que ela invoca a quarta (e última) diretiva a ser criada ainda a user-repos que será responsável por mostrar a lista de repositórios do usuário e representa o quadrado laranja da imagem.

Precisamos então atualizar as duas outras diretivas para que elas saibam lidar com os repositórios de um usuário, que estará na variável repos.

Primeiramente a diretiva github, adicionando dois novos métodos: setRepos e clearRepos. A versão final da diretiva ficará assim:

E também, na diretiva search-user, precisamos adicionar um método para buscar os repositórios de um usuário usando a API do GitHub. Essa é a versão final dela:

E pra fechar, basta criarmos a única diretiva que falta, referente a listagem dos repositórios de um usuário, a user-repos:

Com isso fechamos a aplicação e pra quem quiser ir mais a fundo, eu disponibilizei essa aplicação completa no GitHub para verificar a versão final completa, o processo de build usado e mais!


Se você gostou do post não se esqueça de dar um ❤ aqui embaixo!
E se quiser receber de antemão mais posts como esse,
assine nossa newsletter.

JSCasts

É difícil encontrar conteúdo bom e atualizado em português. Com isso em mente criamos o JSCasts, onde você vai se manter em dia com o JavaScript e todo o seu ecossistema de forma fácil e interativa.

Cursos:

Obrigado por ler! ❤