CODEWITHSUNDEEP
javascriptpythonangularjsdjangonginx
rush
rush

Reputation: 2564

Angularjs integration into django project with API

I've seen some questions around this topic, though I still didn't find the answer I'm looking for.

What is the right way to implement AngularJS application to interact with django?

As I understand the plan should like:

  1. Use django-restful to develop some api. it will be available e.g. /api/v1/whatever/app
  2. Right separate AngularJS code which will interact with api from step 1.
  3. Do the magic: Django is available with django router starting from / . How AngularJS pages should be loaded to client? Should I write additional TemplateView to allow angularjs part load on client side for /? How full urls (e.g. /post/ will be routed)? As I understand there is separate router in angularjs. Should it be separated on web server part? E.g. /api is handled by nginx to django and / is handled to static to load angular?

Do I need to use django-angular at all? As probably it looks like it would be better if angular won't be integrated into django templates and it will be completely separated. Is it so?

Maybe it's a bit mixed up in my head. Though I didn't find related explanation here.

Upvotes: 1

Views: 492

Answers (1)

Vingtoft
Vingtoft

Reputation: 14616

I have been using Django Rest Framework and AngularJS with success, and heres how I've done it:

  1. Serve the AnguarJS as a static file from www.yourdomain.com. This is easily done with nginx or apache.
  2. Next, access the Django Rest Framework through api.yourdomain.com, also an easy configuration.

You could also have Django serving the static files (AngularJS), but I believe its an unnecessarily complicated approach.

If you implement this solution, be aware of cross-CORS errors. This happens when your angularJS (from www.yourdomain.com) tries to access a service (Django Rest Framework) from another domain (api.yourdomain.com). This issue can easily be fixed using a few lines of extra server configuration (nginx example)

Upvotes: 3

Related Questions