CODEWITHSUNDEEP
javascriptdjangoangularjs
tamizhgeek
tamizhgeek

Reputation: 1401

Weird angular js behaviour with django

I am trying out a a simple web app with django and angular js. Was trying out the integration. So I have this in my django 

from django.conf.urls import patterns, include, url
from django.contrib import admin
from sangakanaku.web.models import House, Expense
from django.views.generic import TemplateView
from django.conf import settings
from rest_framework import viewsets, routers

admin.autodiscover()

class HouseViewSet(viewsets.ModelViewSet):
   model = House

class ExpenseViewSet(viewsets.ModelViewSet):
   model = Expense

router = routers.DefaultRouter()
router.register(r'house', HouseViewSet)
router.register(r'expense', ExpenseViewSet)



class SimpleStaticView(TemplateView):
   def get_template_names(self):
    return [self.kwargs.get('template_name') + ".html"]

def get(self, request, *args, **kwargs):
    # from django.contrib.auth import authenticate, login
    # if request.user.is_anonymous():
    #     # Auto-login the User for Demonstration Purposes
    #     user = authenticate()
    #     login(request, user)
    return super(SimpleStaticView, self).get(request, *args, **kwargs)




 urlpatterns = patterns('',
                   # url(r'^$', 'sangakanaku.views.home', name='home'),
                   # url(r'^blog/', include('blog.urls')),

                   url(r'^admin/', include(admin.site.urls)),
                   url(r'^(?P<template_name>\w+)$', SimpleStaticView.as_view(), name='web'),
                   url(r'^api/', include(router.urls)),
                   url(r'^static/(?P<path>.*)$', 'django.views.static.serve',
                       {'document_root', settings.STATICFILES_DIRS}
 ), 
 )

And this is my index.html file

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<script type="text/javascript">
 var app = angular.module('KanakuApp', []);

app.controller('KanakuController', function($scope) {
$scope.expenses = [
    {"description" : "Milk", "amount" : 20, "bearer" : {"username" : "Selva"}},
    {"description" : "Maavu", "amount" : 30, "bearer" : {"username" : "Kumar"}},
    {"description" : "Water", "amount" : 40, "bearer" : {"username" : "Mj"}}
];
 })
 ;
  </script>
  </head>
  <body  ng-app="KanakuApp" ng-controller="KanakuController">
   <div class="container content">
    <div class="panel" ng-repeat="exp in expenses">
        <ul class="panel-heading">
    <li class="panel-title">{{ exp.description }} - {{ exp.amount }}</li>
    </ul>
    </div>
  </div>
   </body>
   </html>

Now when I access this through url localhost:8000/index, I get the following output.

enter image description here

The ng-repeat repeats three times as the data size is 3. But the expressions are evaluated to empty strings. Now the weird thing is, if I copy the same file to the static assets folder and load it like a normal html file, it works perfectly. See the pic below.

enter image description here

What is really going on? Can someone please help me!

Upvotes: 1

Views: 129

Answers (1)

toad013
toad013

Reputation: 1350

What's going on is that the angular syntax is colliding with django's template rendering syntax. django is trying to evaluate and render those "{{ }}" as html tags, then it spits out something that angular can't pick up anymore. That's why they work in when being served from static because it doesn't go through django's rendering system, it simply just serves the file.

you might want to look into using the verbatim tag to exclude a section of your html from being rendered

https://docs.djangoproject.com/en/1.6/ref/templates/builtins/#verbatim

Upvotes: 2

Related Questions