CODEWITHSUNDEEP
javascriptpythondjangoangularjs
user3739703
user3739703

Reputation: 251

Django not playing nicely with simple angularjs, not sure why

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';
});

Upvotes: 1

Views: 351

Answers (1)

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34217

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>

Upvotes: 3

Related Questions