Web

AngularJS – Consumindo a API do GitHub

quinta-feira, 26/07/2012 2:02 pm  

Atualizações (Maio/2013):

 
– Código da aplicação foi movido para o diretório /app
 
– Foi adicionado o Grunt.js ao projeto, para facilitar o desenvolvimento e atualização do branch gh-pages (o Grunt.js precisa do Node.js para executar) 
 

Versão do projeto: 13adf8bd52018f97406d54d861510c0210684ebd

 

Atualizações (Junho/2013):

Este post está desatualizado com relação ao projeto no GitHub, ser mais como histórico.

– Revisei a estrutura de código e diretóris do projeto

– Inclui o Bower para gerenciar as libs utilizadas como dependências (por enquanto apenas para desenvolvimento)

– Ainda estou incluindo suporte e taferas no Grunt.js para otimizar o código destinado para ambiente de produção.

– Mais material de apoio disponibilizado no GitHub – lab-angularjs – wiki

Versão do projeto: fdce30e108116d252a3e5eddc99e4fde9c4732e5

 

 

Eis que estava me atualizando e retornando ao mundo do HTML + JS + CSS, com isso a primera tarefa foi ver o que havia de bom no mercado. Observei que as libs e frameworks de JavaScript evoluiram além do que eu havia imaginado. Durante meus estudos e pesquisas acabei vendo muitos exemplos, onde as pessoas estavam utilizando o Backbone.js (alguns links sobre), porém não gostei muito da forma de trabalho, então um dia conversando com a galera na internet, o @vedovelli comentou sobre o Angular.js e outras pessoas além dele também me falaram muito bem a seu respeito, com isto resolvi construir uma aplicação e mecher um pouco para ver como é que ele se comporta durante o desenvolvimento de uma aplicação.

Com a missão de enriquecer o vocabulário HTML o framework AngularJS chega com a marca Google de simplicidade e promete um workflow diferente para os desenvolvedores.

 

Atenção não tenho intenção de escrever um post introdutório sobre o Angular.js, caso queira algo mais inicial recomendo antes de continuar a leitura ver os respectivos post's: 

Vedovelli – Introdução ao AngularJS

Tableless – Criando uma aplicação simples com AngularJS

 

O que me chamou atenção e me agradou no Angular.js?

Como venho do desenvolvimento de sistemas utilizando o Adobe Flex, sempre gostei da facilidade e flexibilidade para o desenvolvimento e definições de novos componentes, além da facilidade de programação oferecida pelo Flex. Algo similar a essa característica observei no Angular.js, em resumo, achei muito fácil e prático desenvolver uma aplicação utilizando o Angular.js.

O Angular.js possui uma funcionalidade de injeção de dependências que é muito inteligente e funciona muito bem. Por si só ele já consegue reconhecer os parametros dos controllers e injetar o respectivo objeto referente ao nome do paramâmetro.

Porém o Angular.js não te limita e restringe a utilizar obrigatóriamente estes nomes, que ele já sabe tratar, caso queira, você pode definir livremente o nome do parametro que desejar, então, basta definir o que deve ser injetado na respectiva sequência dos parâmetros que foi definido na function, conforme descrito na documentação (link $injector):

Outro ponto forte do Angular.js que me agradou é sua documentação: Doc 1.0.1 / Guide

 

Qual teste que eu realizei utilizando o Angular.js?

Já aviso, não fui nada criativo, resolvi construir a minha versão da aplicação: AngularJS GitHub Contributors ( app | github ), a qual acessava a API do GitHub e lista os repositórios públicos de um determinado usuário e respectivos contribuidores dos repositórios. Onde esta aplicacão utiliza a YUI Library do Yahoo para a definição da interface.

No meu caso reconstrui a aplicação utilizando como base o Twitter Bootstrap para a definição do layout da aplicação, e mudei algumas características da organização do código, porém na essência a idéia e aplicação é a mesma, com o adicional da listagem dos Gists públicos do usuário.

Outra diferença na implementação deste projeto foi a utilização do modelo de Closures para a definição dos controllers (github: controllers.js), seguindo uma boa prática de programação com JavaScript. Lembrando que o escopo de qualquer declaração de variável e/ou função é global valido para todo o HTML em execução pelo browser, o que pode gerar alguns problemas conforme a aplicação cresce de tamanho.

Um recurso que utilizei nesta aplicação foi o roteamento das URLs da aplicação (github: app.js) e injeção dos respectivos templates de html no (github: index.html), onde está a definição do div com o atributo ng-view

 

Mas onde está esta aplicação que até aqui você apenas falou?

Calma, calma, segue o link: ver a aplicação em execução / código no github.

Versão do projeto anterior a: c85e9d70d140f965aadb8fcb6003790b088b9465

 

E a estrutura ad aplicação?

/angularjs-github-info
    /css
        app.css
          Definição dos estilos da utilizados na aplicação
    /js
        app.js 
          Definição dos roteamento das URLs para os respectivos templates e controllers
        components.js
          Definição das tags das abas
        controllers.js
          Definição das regras e processamentos das telas, utilizando Closure
        services.js
          Definição do acesso a API do GitHub
    /tpl
        /github
            repo-constributors.html
              Definição da listagem das pessoas que contribuiram no projeto
            repo-info.html
              Informações do repositório selecionado
            repo.html
              Definição do layout referente a tela de visualização das informações do repositório
            user-gists.html
              Definição da listagem dos gists públicos de um determinado usuário
            user-info.html
              Informações de um usuário do GitHub
            user-repos.html
              Definição da listagem dos repositórios públicos de um determinado usuário
            user.html
              Definição do layout referente a tela de visualização das informações do usuário
        about.html
          Informações a respeito da aplicação
        search.html
          Página inicial injetada pelo AngularJS definido no js/app.js
    index.html
 
 
Considerações finais:
 
O Angular.js me surpreendeu bastante, e caso no seu caso, assim como eu vem do desenvolvimento de sistemas com Adobe Flex, ao utilizar o Angular.js, provável que você se sinta em casa.
 
Utilizando ele consegui facilmente trabalhar no modelo Cliente e Servidor, realizando a comunicação através de RESTful, sendo este formato similar ao que usava no Flex onde a comunicação era realizada através de serviços utilizando o protocolo AMF.
 
Bom, mas aqui deixo uma dica, não basta apenas migrar para o Angular.js, recomento que você invista no aprendizado do JavaScript, e é sério, não ache que você sabe programar JavaScript, não cometa o mesmo erro que cometi. O JavaScript possui suas peculiaridades próprias, onde até a forma de escrever a sintaxe dos seus códigos podem e muito provavelmente vão impactar na execução do seu código JavaScript.
 
Mas vou lhe poupar um pouco o trabalho, segue minhas recomendações para o caso:
 
 
 
 
 
 
 
 
 
Vai um bônus ai?!
 
Percebeu que eu fiz a publicação da aplicação diretamente no GitHub? Eis a dica de como fazer o mesmo: neste gist
 
Segue meus links salvos sobre: Angular.js / Backbone.js / JavaScript
 
Outros projetos de exemplo, que utiliza o Angular.js no Github, com nomes iniciados por: restful-bookmarks-…
 
, , , , ,

Este post foi escrito por:

- que escreveu 500 post(s).


Entre em contato