Concrete Logo
Hamburger button

AngularJS do jeito certo: pensando em Angular 2

  • Blog
  • 7 de Dezembro de 2015
Share

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

angularjs-620x349

 

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:

angular-1-620x450

É possível ver uma demonstração da versão final da aplicação neste link.


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

angular-2-620x359

  1. github: diretiva “pai”, controla todas as outras internas;
  2. search-user: representa a busca por usuários;
  3. user-info: mostra as informações do usuário;
  4. user-repo: 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):

Analisando essa estrutura percebemos que 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 complementá-la com o código que resta.

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

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

Caso a variável seja undefined, vamos limpar as informações. Caso contrário, fazemos 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 para a 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 e 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, 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ão na variável repos.

Primeiramente adicionamos dois novos métodos: setRepos e clearRepos na diretiva github. A versão final 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:

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

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

Em resumo, nesse post aprendemos:

  1. Fazer uma aplicação completa sem controllers, usando apenas diretivas;
  2. Como transmitir dados de uma diretiva para outra;
  3. Começar a pensar com a mentalidade Angular 2.

Gostou? Aprendeu? Se tiver qualquer dúvida ou comentário, deixe sua contribuição abaixo. Até a próxima!