Angularjs code not working with Django

Question

I want to add simple angularjs code to django. For this I have taken the simple example: I have put the below code in my template:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
                $scope.lastName = "Doe";
        });
</script>

<div ng-app="myApp" ng-controller="myCtrl">

        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
<br>
        Full name:{{firstName}}

</div>
</body>
</html>

My view.py is as follows:

from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader

# Create your views here.
def index(request):
        template = loader.get_template('warlist/index.html')
        return HttpResponse(template.render())

Now when I run it,it is taking the names in the text feild but It is not printing the full name. However same angularjs code is working fine without django.

nik_m · Accepted Answer · 2017-03-21 09:25:17Z

2

That's because you are using Django template engine to render firstName. But it is not passed through your view and, thus, it's not recognized by Angular. To "escape" {{ }} characters and use Angular's, do this:

Full name: {% verbatim %}{{firstName}}{% endverbatim %}

That way Django will not try to parse {{ }} and instead Angular's {{ }} will be used. Check verbatim for details.

edited Mar 21, 2017 at 9:25

answered Mar 21, 2017 at 9:18

nik_m

12.1k4 gold badges47 silver badges61 bronze badges

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

2 Comments

space earth Over a year ago

Great man..It is working.How to transfer the value of the firstName and lastName in views.py. Any clue?I want to parse the text that user has entered in the text section.

nik_m Over a year ago

For that, it is better to ask a different question. That's how SO works. No sub-questions in comments. However, in a nutshell, you would create a form (which will include the <input> tags) and make a POST request to Django. Your view then will receive the values of the <input>s and handle them approprietly.

Osman Cea · Accepted Answer · 2017-03-21 09:27:54Z

2

Django templates use the same interpolation than angular, which is double brackets {{}}. You can use $interpolateProvider in your config method to change angular notation, so it doesn't collide with Django templates.

module
  .('myApp')
  .config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
})

Then anytime you need to interpolate anything in your view:

Fullname: {$ firstName + lastName $}

edited Mar 21, 2017 at 9:27

answered Mar 21, 2017 at 9:21

Osman Cea

1,4679 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angularjs code not working with Django

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related