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.
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.
What is really going on? Can someone please help me!
