What is the proper structure of integrating Ionic with Django?

ionic-v1
1

Hello everyone,

I am developing a mobile app which is using Ionic (AngularJS) as the front end and Django as the backend, but I am not sure how to make them work together perfectly. Both Ionic and Django has their own template file. What I am doing right now is to establish the connection using http request. (Just like two separate projects) However, then I find out that if I put all the front end stuffs (html,css,js, etc) in the Ionic www file, then the Django tags will not be valid. (e.g.: {% if else %} ).

I tried to place the Django files into the Ionic project file or place the Ionic files into the Django project files, unfortunately, none of them works. (I tried to change the configurations but still no positive result)
May I ask what is the proper structure of integrating Ionic with Django? Should I just keep them like two separate projects and communicate using http requests or is there a better way?

I would appreciate for any reply. Thank you very much in advance.

2

You can’t integrate Django templates into an Ionic app, Django is a server-side framework.

The right way to integrate Django with your app is to use Django to expose data as a JSON web API that your app will consume through $http services.

3

Thank you very much for your reply gmarziou.
So you mean I should keep them like two separate projects and use $http services to communicate? That is what I am doing right now but I was thinking if there is a way to make them work closer, then everything will be wonderful. I found an article talking about migrating the Django template tags into ng tags. (link: http://blog.tryolabs.com/2015/01/30/django-to-angularjs/). The following codes:

> <ul class="nav nav-pills nav-stacked">
>   {% for search in searches %}
>     {% if search.id == selected_search.id %}
>       <li class="active">
>     {% else %}
>       <li>
>     {% endif %}
>       <a href="{% url 'search' search.id %}">{{ search.name }}</a>
>     </li>
>   {% endfor %}
> </ul>

So the codes like {% for search in searches %}, {% endif %} in the Django template will not work in Ionic. (Because these symbols do not belong to ng) The blogger said we have to migrate it (or translate it) into the following:

<ul class="nav nav-pills nav-stacked">
  <li ng-repeat="search in searchCtrl.searches" ui-sref-active="active">
    <a ui-sref="home.search({searchId:search.id})">{{search.name}}</a>
  </li>
</ul>

Therefore I made this post to see if there is any way to avoid doing this translation and make them work closer. As a server-side framework, Django has its own template files and it has its own template tags, that is confusing me. Most of the online tutorials directly put all the front end stuffs into the Django template files and the static files, and the Django template tags work in those cases. I tried to put Ionic files into the Django template files and static files, the Django template tags work well but the Ionic is not working. Seems like there is no better way to blend them together.
Thank you very much for your reply.

4

Because the templates are interpreted by Django on server before being sent as HTML pages to the browser which then executes the angularjs part.

The blog you cited is about building a web app with Django and Angular, it’s not about building a mobile app using Django as a backend.

When Django is used as a backend server for an Ionic app, it is no longer used to produce HTML pages, it’s usually only used to produce data in JSON format and this data is then rendered by the mobile app.

5

Got it, thank you very much! :smile: