Concrete Logo
Hamburger button

Usando AngularJS com Django

  • Blog
  • 12 de Março de 2015
Share

A ideia desse post é explicar uma maneira de usar AngularJS em um projeto Django.  Se você não conhece Django, saiba que é um framework web, escrito em Python, muito popular. Já o AngularJS é um framework em JavaScript que faz umas coisas bem legais com o  HTML: adiciona funcionalidades, manipula elementos e tem se tornado uma grande tendência entre desenvolvedores front-end. Neste artigo, vamos ver como integrar o AngularJS em um projeto Django sem utilizar pacotes prontos.

Lembramos que esse post é apenas um guia de integração entre as ferramentas, por isso seria ideal que o leitor tenha alguma experiência com AngularJS e Django, além de aplicações assíncronas.

Vale lembrar que essa é uma solução dita híbrida, como forma de obter alguns benefícios do Angular.js, dentro do contexto de uma aplicação django. A solução pura de uma Single Page Application usaria somente o Angular.js ou similares e implementaria a API com Django ou outros web application frameworks,  BaaS ou outros frameworks server side, como o Node.js.

Hoje, vamos usar o exemplo de desenvolvimento de um site com um carrinho de compras. Vamos lá!

Definição da estrutura

Comece criando uma aplicação para carrinho de compras:

Crie a estrutura para os arquivos estáticos.

Importante: A estrutura que utilizaremos para AngularJS não é uma obrigação. Você pode usufruir dele da forma que achar mais conveniente.

Adicione a app no settings do projeto:

views.py
Crie uma view básica para renderizar o carrinho e outras duas para serem usadas como APIs:

urls.py

Crie as rotas das views:

Adicione-as no urls.py do projeto:

app.js

Atenção, esta é a parte mais importante do post. Sem essa configuração surgirá uma série de problemas. Vá na pasta cart/static/app e crie um arquivo chamado app.js com o seguinte conteúdo:

cart-controller.js

Vá na pasta cart/static/app/controllers e crie um arquivo chamado cart-controller.js com o seguinte conteúdo:

cart.html

Agora iremos criar a página do carrinho. Crie um html em cart/templates/cart.html:

Conclusão

Mostramos neste post um exemplo de uso do AngularJS com o Django, definindo uma forma híbrida entre os dois frameworks. A solução foi simplificada ao ponto de não tratar possíveis problemas e requisitos básicos, mas a ideia mais importante era demonstrar o uso dessas ferramentas no mundo real. Às vezes, implementar uma solução com menos dependências externas é mais interessante do que contornar o problema com aplicações de terceiros, simplesmente por termos mais controle sobre o que estamos criando. Veremos mais desse conceito em um próximo post, que abordará como criar testes para AngularJS.

Ah! Caso você queira, veja o repositório pronto no bitbucket da Concrete. Se ficou alguma dúvida, tem alguma sugestão ou crítica, deixe seu comentário abaixo. =)