Provides {% angularapp %} tag which simplifies integration of Angular views into complete Django apps.
- Python 2.6, 2.7, 3.3, 3.4
- Django 1.5+
- (optionally, django-rest-framework)
- (optionally, django-tastypie)
Assume next Django app:
models.py:
from django.db import models
class BlogPost(models.Model):
text = models.TextField()
class BlogPostComment(models.Model):
blogpost = models.ForeignKey(BlogPost, related_name='comments')
text = models.TextField()
views.py:
from django.views.generic import DetailView
from . import models
class BlogPostDetail(DetailView):
model = models.BlogPost
context_object_name = 'blogpost'
template_name = 'blogpost_detail.html'
Now the most interesting:
-
Add AngularMagicMixin and describe inner context:
from django.views.generic import DetailView from angularmagic.views import AngularMagicMixin from . import models class BlogPostDetail(AngularMagicMixin, DetailView): model = models.BlogPost context_object_name = 'blogpost' template_name = 'blogpost_detail.html' def get_included_context(self, context): return { 'blogpost': context['blogpost'], 'comments': context['blogpost'].comments.all() }
-
Include {% angularapp %} tag:
{% load angularmagic %} {% angularapp %} // // View code goes here ... // {% endangularapp %}
Variables defined inside {% angularapp %} will not be evaluated by Django, any other Django tags are still working though.
(It's even possible to mix Django tags with Angular views but I'm not sure it's a good practice.)
-
Bind passed context to any Angular scope with bind-django-context directive:
<div ng-controller="BlogPostCtrl" bind-django-context>
-
Add your view code:
{% angularapp %} <div ng-controller="MyCtrl" bind-django-context> {{ blogpost.text }} <div class="comment-holder"> <div class="comment" ng-repeat="comment in comments"> <p>{{ comment.text }}</p> </div> </div> </div> {% endangularapp %}
Everything will be evaluated by AngularJS.
INSTALLED_APPS = (
...
'angularmagic',
)
angular.module('myModule', ['django.angularmagic']);
Grab module with
<script src="{% static 'angularmagic/angularmagic.js' %}"></script>
AngularMagicMixin provides next configuration variables:
-
serializer_classes
You can specify how your models should be serialized with serializer classes. Both Serializer of rest_framework and Resource or tastypie are supported:
api.py:
import rest_framework.serializers import tastypie.resources from . import models class BlogPostSerializer(rest_framework.serializers.ModelSerializer): class Meta: model = models.BlogPost class BlogPostCommentResource(tastypie.resources.ModelResource): class Meta: queryset = models.BlogPostComment.objects.all()
views.py:
from django.views.generic import DetailView from angularmagic.views import AngularMagicMixin from . import api, models class BlogPostDetail(AngularMagicMixin, DetailView): ... # Can be a dict serializer_classes = { models.BlogPost: api.BlogPostSerializer, models.BlogPostComment: api.BlogPostCommentResource } # Or a list if each serializer/resource is model-related # (i.e. is a ``ModelResource`` or ``ModelSerializer`` subclass): serializer_classes = [BlogPostSerializer, BlogPostCommentResource]
Or create your own serializers using base classes
- Add tests;
- (?) Add {% variable var_name %} inclusion tag;
- Add asynchronous context retrieval.