integrating Django with Angular js

Question

This will going to be a very basic question that how to integrate Django with angularjs.I have developed a web application using Django.In views.py, i want to use json to dump my data from database but i don't have any idea or you can say i can't get started with the process.I have a very basic level knowledge about Angularjs.If you give some examples , then it will help me to get start in Angularjs using Django.For better convenience,here is a sample view that i have produced..

def userphoto(request):
    user_photo = Photo.objects.get(user = request.user)
    context = RequestContext(request)
    ctx_dict = {'user_photo': user_photo}

    return render_to_response('userena/profile_detail.html',ctx_dict,context)

here the ctx_dict directly rendering into a html file,but i want to render them using Angularjs probably using json and http get request to implement the data using Angularjs http service.How can i do this?in mention i am a novice in angularjs.

Django & Angular Js can be clubbed to implement a filter. Here is an article on the same. — Shriniket Deshmukh
– Shriniket Deshmukh, Commented Jan 20, 2020 at 7:34

dt0xff · Accepted Answer · 2014-06-19 08:41:18Z

You can use django-angular, of cause, but I find this package too WIP.

You should think about AJAX instead of just rendering. It depends on a problem.

I'd suggest to use plain django or adding tastypie or django-rest-framework. I, currently, use plain django views.

Yes, to send models data back to angular, you should provide JSON of your data, you should serialize your model. But! There is a lot problems and catches. First of, you don't need everything from the model. Because user could access to some strange fields. Because you will send too many data you don't use on client side.

So, you should serialize your items data into JSON with fields you want. Here is example how I do it:

@ajax_request
@login_required
def mydata_ajax(request):
    qs = MyData.objects.all()

    #add possible filters
    if request.GET.get('search'):
        s = request.GET.get('search')
        qs = qs.filter(
            Q(name__icontains=s) |
            Q(email__icontains=s) |
            Q(address__icontains=s) |
        )

    qs = qs.order_by('task_time', 'name')

    #setup pagination so angular will retrieve data page by page
    pages = Paginator(qs, 20)
    try:
        current_page = int(request.GET.get('page', 1))
    except ValueError:
        current_page = 1

    if current_page > pages.num_pages:
        current_page = 1

    #get reguested page
    page = pages.page(current_page)

    #create response
    return {
        'total': pages.count,
        'num_pages': pages.num_pages,
        'page': current_page,
        'data': [{
            'id': o.id,
            'name': o.name,
            'email': o.email,
            'address': o.address,
        } for o in page.object_list]
    }

First of, I use ajax_request decorator, from django-annoying package, for my view, which expects view to return list, dictionary or any other simple data so it will automatically serialize(convert) it to JSON.

There is some handy things for you, like example of filters and pagination, btw.

NIlesh Sharma · Accepted Answer · 2014-06-09 09:57:36Z

0

have a look at

answered Jun 9, 2014 at 9:57

NIlesh Sharma

5,6656 gold badges38 silver badges55 bronze badges

1 Comment

Md. Tanvir Raihan Over a year ago

can you please more specific about what i am actually looking for?

Collectives™ on Stack Overflow

integrating Django with Angular js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related