Django not working with Angularjs

Question

When I open the file angular.html the angularjs with Chrome, the html work normally, showing the array of information in the table. However, when I use Django, the same angular.html file, angularjs does not show the array of information in the table. I do not know what can I do?

File angular.html

<html ng-app>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script>
        function tabela($scope){
            $scope.linhas2=[["Nexus S1","Oi1"],["Nexus S2","Oi2"],["Nexus S3","Oi3"]]               
        }
    </script>
</head>
<body>
    <div ng-controller="tabela">
        <table>
            <tr ng-model="item2" ng-repeat="item2 in linhas2">
                <td ng-repeat="item3 in item2">{{ item3 }}</td>
            </tr>   
        </table>
    </div>
</body>
</html>

File views.py

from django.shortcuts import render_to_response

def ang(request):
    return render_to_response("angular.html")

File urls.py

from django.conf.urls import patterns, include, url

urlpatterns = patterns('',
    url(r'^angular/','bvmfconsulta.views.ang'),
)

The Django finds angular.html but shows a blank page.

To prevent mix up of Angularjs with Django: stackoverflow.com/a/27282607/2412381 — yeaske
– yeaske, Commented Aug 11, 2016 at 17:47

alecxe · Accepted Answer · 2014-12-22 19:30:50Z

11

The problem is that both Django and AngularJS share the same syntax for variable substitution in templates.

The easiest option would be to tell Django not to use it's syntax in places you need to use angularjs variable substitution - in other words, use verbatim tag:

{% verbatim %}
    <div ng-controller="tabela">
        <table>
            <tr ng-model="item2" ng-repeat="item2 in linhas2">
                <td ng-repeat="item3 in item2">{{ item3 }}</td>
            </tr>   
        </table>
    </div>
{% endverbatim %}

See other options at:

Integrate AngularJS with Django

answered Dec 22, 2014 at 19:30

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bogs · Accepted Answer · 2014-12-24 12:14:40Z

Indeed, you can use the {% verbatim %} tag. There is another way: you can change the AngularJS tags:

var app = angular.module('dashboardApp').config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

Your code will transform to:

<html ng-app>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script>
        function tabela($scope){
            $scope.linhas2=[["Nexus S1","Oi1"],["Nexus S2","Oi2"],["Nexus S3","Oi3"]]               
        }
    </script>
</head>
<body>
    <div ng-controller="tabela">
        <table>
            <tr ng-model="item2" ng-repeat="item2 in linhas2">
                <td ng-repeat="item3 in item2">{$ item3 $}</td>
            </tr>   
        </table>
    </div>
</body>
</html>

This way you can visually distinguish between Angular and Django Template tags. Cheers!

Collectives™ on Stack Overflow

Django not working with Angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related