Integrar Angular JS com um projeto Django

Gefferson Vivan

unread,

Jun 7, 2015, 4:10:04 PM6/7/15

to django...@googlegroups.com

Olá pessoal, após algumas dicas para interagir com as variáveis de meu projeto, o pessoal me indicou para usar Angular JS.

Pois bem, acredito que, para integrar os dois, algo mais é necessário além dos comandos, pois assim não funcionou.

<html lang="en" ng-app>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Alguém poderia dar alguma dica de como trabalhar com o mesmo nos templates do Django?

Grato pessoal, ótimo dia a todos.

Régis Silva

unread,

Jun 8, 2015, 7:06:04 AM6/8/15

to django...@googlegroups.com

Veja se isso ajuda...

https://www.youtube.com/watch?v=01q8kF7OvzY

Tem o github do Tony tb.

Gefferson Vivan

unread,

Jun 8, 2015, 7:56:10 PM6/8/15

to django...@googlegroups.com

Olá Régis, grato pela ajuda. Consegui compreender um pouco, mas ainda não consegui rodar o Angular em meu projeto Django.

Talvez por não estar inteirrado com Angular, estou tendo alguma dificuldade.

Régis Silva

unread,

Jun 8, 2015, 8:02:03 PM6/8/15

to django...@googlegroups.com

Mais dicas https://github.com/qmagico/treinamento-angularjs

Regis da Silva | Web Developer

--
Você recebeu essa mensagem porque está inscrito em um tópico no grupo "Django Brasil" dos Grupos do Google.
Para cancelar inscrição nesse tópico, acesse https://groups.google.com/d/topic/django-brasil/2GKo9qL7ApI/unsubscribe.
Para cancelar inscrição nesse grupo e todos os seus tópicos, envie um e-mail para django-brasi...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

Gabriel SERPRO

unread,

Jun 8, 2015, 8:26:24 PM6/8/15

to django...@googlegroups.com

Um detalhe importante é que as expressões padrões do angular utilizam chaves, assim como o template padrão do django/jinja 2.

Ao referenciar o código do angular em sua página lembre-se de fazer o 'skip' com as seguintes tags:

{% verbatim %}

... código. ..

{% endverbatim %}

No caso do Jinja 2:

{% raw %}

... código ...

{% endraw %}

Os demais erros você visualiza na console do seu browser.

--
Você recebeu essa mensagem porque está inscrito no grupo "Django Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para django-brasi...@googlegroups.com.

Fellipe Henrique

unread,

Jun 8, 2015, 8:37:29 PM6/8/15

to django...@googlegroups.com

Pra evitar isso, dentro do

angular.module, eu faço isso:

.config(function ($httpProvider, $interpolateProvider) {

$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

$interpolateProvider.startSymbol('{$');

$interpolateProvider.endSymbol('$}');

});

troco o "simbolo" do angular pra {$ e $}

T.·.F.·.A.·. S+F

Fellipe Henrique P. Soares

e-mail: > echo "lkrrovknFmsgor4ius" | perl -pe \ 's/(.)/chr(ord($1)-2*3)/ge'

Blog: http://fhbash.wordpress.com/

GitHub: https://github.com/fellipeh

Twitter: @fh_bash

Régis Silva

unread,

Jun 9, 2015, 8:31:01 AM6/9/15

to django...@googlegroups.com

A interpolação pode ser feita assim tb

https://github.com/tiagomatosweb/ng-masters/blob/gh-pages/js/aula03-exe01.js#L13

Regis da Silva | Web Developer

Fábio Cerqueira

unread,

Jun 9, 2015, 12:07:16 PM6/9/15

to django Brasil

Fellipe,

isso não causa problemas caso você use dependências no angular que tenham template?

Fábio Cerqueira

Fellipe Henrique

unread,

Jun 9, 2015, 12:27:47 PM6/9/15

to django...@googlegroups.com

Fábio,

Para lhe ser sincero, até o momento não tive problemas...

Acredito eu, na minha pequena sabedoria de AngularJS rsrsrs, que não venha a ter problemas, visto que este é um padrão que o próprio angular permite..

Mas como eu disse, uso muito pouco o AngularJS.. para se ter uma idéia, do que ele é capaz de fazer, eu uso só o básico mesmo...

T.·.F.·.A.·. S+F

Fellipe Henrique P. Soares

e-mail: > echo "lkrrovknFmsgor4ius" | perl -pe \ 's/(.)/chr(ord($1)-2*3)/ge'

Blog: http://fhbash.wordpress.com/

GitHub: https://github.com/fellipeh

Twitter: @fh_bash

Carlos Perche

unread,

Jun 9, 2015, 2:22:53 PM6/9/15

to django...@googlegroups.com

Felipe voce tera problemas caso esteja utilizando alguma app angular de terceiros que utilize como tags o {{ }}, que é o padrao

uma forma facil de resolver isso e utilizar a template tag do django, o motor de templates do django vai ignorar tudo que estiver dentro dessa tag e dai voce pode usar o {{ }} do angular.

{% verbatim myblock %}
    Avoid template rendering via the {% verbatim %}{% endverbatim %} block.
{% endverbatim myblock %}

Lembrando que essa tag está disponivel desde django 1.5
https://docs.djangoproject.com/en/1.5/ref/templates/builtins/#verbatim

Gefferson Vivan

unread,

Jun 10, 2015, 10:10:26 AM6/10/15

to django...@googlegroups.com

Desculpem minha inexperiência pessoal.

Pelos comentários e ajuda dos colegas, tenho que criar um arquivo angular.module (esse arquivo fica dentro do statics, no projeto drago ?) e como faço para referenciar ele?

Ao usar o

{% verbatim %}

... código. ..

{% endverbatim %}

que o Grabriel passou, também não funcionou.

Não estou conseguindo juntar as pedras...

Grato

Em domingo, 7 de junho de 2015 17:10:04 UTC-3, Gefferson Vivan escreveu:

Adailton

unread,

Jun 10, 2015, 1:01:02 PM6/10/15

to django...@googlegroups.com

Boa tarde Gefferson tudo certo? vou tentar te explicar de uma maneira simples, veja bem tanto Django como Angular usam sintaxes parecidas por tanto, dentro do template que você for usar algum código angular use o verbatim e coloque o código dentro dele, ex:

<html>
<head>
</head>
<body>
{% verbatim %}... código angular here. ..
{% endverbatim %}
</body>
</html>

porém ah também uma maneira de se fazer isso dentro do próprio arquivo angularjs que sera usado por você, suponha-se que você tenha um arquivo de nome app.js

dentro dele no começo de tudo coloque o seguinte:

var app = angular.module("myApp", []);

app.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
});

tendo em mente que, os caracteres usados [[ ]] podem ser substituídos por outros como {[ ]} {$ $} whatever...

pessoalmente prefiro o interpolatePorvider, pois assim você não precisa ficar colocando verbatim sempre que for usar o código e como existe include no Django isso acaba sendo uma maravilha.

ate mais, espero ter ajudado.

Att;

Adailton do nascimento

Gabriel SERPRO

unread,

Jun 10, 2015, 2:12:12 PM6/10/15

to django...@googlegroups.com

Você precisa referenciar seu código JavaScript no head primeiramente. No angular.JS você vai fazer as requisições do tipo GET, POST, PUT, PATCH e DELETE utilizando o modulo de http do próprio angular.js para utilizar o DRF.

Eu não gosto muito de mudar o modo de interpolação por conta de outros módulos do angular que possam ser utilizados.

Sobre o angular e seu código: você precisa referenciá-los normalmente lá no head com <script src=...> além de ter as marcações 'ng' no seu html. Nesse ponto, se você tiver dúvidas recomendo fazer o primeiro exemplo disponível no site do Angular.js, será suficiente para você entender.

Um js de exemplo de como pegar resultados a partir de um serviço REST:

https://dpaste.de/9K48

Régis Silva

unread,

Jun 11, 2015, 8:08:55 AM6/11/15

to django...@googlegroups.com

http://ng-masters.com/

Carlos Perche

unread,

Jun 11, 2015, 8:21:15 AM6/11/15

to django...@googlegroups.com

segue isso q nao tem erro , http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html

Robson Marcelino

unread,

Jun 11, 2015, 8:52:10 AM6/11/15

to django...@googlegroups.com

Sem dúvidas esse blog e o ng-masters nem se fala, mas para quem nem sabe o que é AngularJs recomendo, https://www.youtube.com/user/rodrigobranas

Gefferson Vivan

unread,

Jun 15, 2015, 5:13:32 PM6/15/15

to django...@googlegroups.com

Olá pessoal, desculpem a demora para responder.

Seguinte, olhei atentamente as dicas dadas por vocês, mas continuo sem sucesso.

Estou usando a seguinte sintax no template do Django:

<html lang="en" ng-app>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="{{ STATIC_URL }}js/angular.min.js"></script>

{%verbatim%}

<input type="text" ng-model="nome">
<p>Olá, Tableless! Meu nome é: {% nome %}</p>

{%endverbatim%}

e retorna isso

Olá, Tableless! Meu nome é: {% nome %}

sem interação alguma.

já pesquisei sobre a importação do {%load verbatim%}, mas retorna erro.

minha versão do django é a 1.7

Sobre o app.js, o mesmo deve ser criado dentro do statifiles?

e onde o chama? Dentro do <html lang="en" ng-app>?

Grato pessoal.

Em domingo, 7 de junho de 2015 17:10:04 UTC-3, Gefferson Vivan escreveu:

Tito Gonzales

unread,

Jun 22, 2015, 2:14:03 PM6/22/15

to django...@googlegroups.com

não seria isso?

{%verbatim%}

<input type="text" ng-model="nome">

<p>Olá, Tableless! Meu nome é: {{ nome }}</p>

{%endverbatim%}

Em domingo, 7 de junho de 2015 17:10:04 UTC-3, Gefferson Vivan escreveu:

Gefferson Vivan

unread,

Jun 23, 2015, 8:23:05 AM6/23/15

to django...@googlegroups.com

Olá Tito, muito obrigado pela dica. Realmente funcionou.

Grato a todos vocês pelas dicas pessoal.

Ótima semana a todos.

Em domingo, 7 de junho de 2015 17:10:04 UTC-3, Gefferson Vivan escreveu:

Guilherme Carvalho

unread,

Jun 25, 2015, 7:25:03 AM6/25/15

to django...@googlegroups.com

Bom dia.

Você pode fazer isso:
application.config(function($interpolateProvider) {

$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});

Assim quando vc precisar usar elementos do angularJS no template vc usa [[ ]] simplificando seu trabalho. Você pude configurar para utilizar qualquer conjunto de teclas que melhor lhe convier.

Willian Morais

unread,

Jun 25, 2015, 9:17:20 AM6/25/15

to django...@googlegroups.com

Senhores, aproveitando a carona do tópico também estou aprendendo Angularjs e tentando aplicar a integração com Django.

Vocês teriam um exemplo de chamada Ajax do Angular para o Django? Gostaria de coletar algumas informações de um model.

Também não estou entendo como funciona a comunicação de um module para outro. Deveria eu utilizar somente um módulo em toda aplicação e comunicar somente através de controllers?

--

Atenciosamente,

Willian de Morais

São José - Santa Catarina

Gtalk: willian...@gmail.com

Celular: (48) 8811-9660

Adailton

unread,

Jun 30, 2015, 3:38:52 PM6/30/15

to django...@googlegroups.com

@Willian da uma olhada aqui, alem do arquivos.js da uma passada na views também, espero que ajude até mais.

https://github.com/dhelbegor/simpleajs/blob/master/simpleajs/core/static/js/controlles.js

Att;

Adailton do nascimento

Willian Morais

unread,

Jun 30, 2015, 5:06:33 PM6/30/15

to django...@googlegroups.com

Bem facinho em Adailton, obrigado!

--

Você recebeu essa mensagem porque está inscrito no grupo "Django Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para django-brasi...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

Reply all

Reply to author

Forward