Django not playing nicely with simple angularjs, not sure why

Question

So heres my simple angular app. When I run the html file on its own via the browser, the variable name is displayed saying "nothing". However when I integrate it into django by making a dummy view that just calls a template (see views below), no variable name is shown. The only differece is when using django I load the JS files via {% static %} . The html output is the exact same for both except the django version doesn't output the variable name. I have broken the problem down to its simplest form and can't seem to understand what's happening here.

JS files are 100% loaded in django version. Chrome console shows no errors. I originally developed a simple app in angular to integrate with my django app but I can't do anything if this simple issue stands in my way.

views.py

def home_tester(request):
    return render(request, 'angular/base.html')

HTML

<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
    <meta charset="UTF-8">
    <title>Learning AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="gridfilter.js" type="text/javascript"></script>
</head>

<body>
    <div id="content" ng-controller="GridFilter">
        {{name}}
    </div>
</body>
</html>

app.js

var app = angular.module('ZeTasty',[]);

gridfilter.js

app.controller("GridFilter", function($scope){
    $scope.name = 'nothing';
});

Jossef Harush Kadouri · Accepted Answer · 2014-07-03 08:00:28Z

3

you need to add {%verbatim%} and {%endverbatim%} tag

django and angular use the same {{ and }} markers. by hinting django with {%verbatim%}, he will ignore the {{ and }}. this will allow you to combine angular with django templates

example:

<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
    <meta charset="UTF-8">
    <title>Learning AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="gridfilter.js" type="text/javascript"></script>
</head>

<body>


<!-- 'verbatim' is required in order to disable Django's template engine
so we could use Angular's syntax -->

{%verbatim%}
    <div id="content" ng-controller="GridFilter">
        {{name}}
    </div>

{%endverbatim%}

</body>
</html>

answered Jul 3, 2014 at 8:00

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

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

1 Comment

user3739703 Over a year ago

Dude I love you!! You have no idea how long I spent trying to figure this out. I don't know how I didn't come across anywhere that this had to be done. Not even in django-angular docs. I just assumed that because Im not sending any context to the template, it would just use the js stuff. Clearly that's not the case. Thanks again !!

Collectives™ on Stack Overflow

Django not playing nicely with simple angularjs, not sure why

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related