Django Angular Folder structure to load angular templates

Question

I've got the hang of constructing rest API's to pass all data, but I'm having trouble knowing how to set up the folder structure to be able to load an angular template by visiting an URL.

Lets say that in my settings.py I have a registered path api, that contains the JSON data i want to pass to the client, and have some angtemplate.html. I also have a Django app called apitest which gets data from the server and provides the data to the api that angular needs to get data from.

How do I route the request so that when a user goes to a url on my server like 127.0.0.1:8000/apifetch, the user is presentet with angtemplate.html that has loaded the data from /apifetch?

I realize this is a triple question involving first angular app-structure, second Django template syntax and folder structure, and thirdly url-patterns.

I tried to follow the thinkster angular django tutorial, but was unable to connect the angular app to the website.

My own theory is that inside the apitest Django application I create a few templates and in the static folder of that app I keep my angular apps, which I load as static into the template, and connect the url as I would usually do.

However I've heard that you shouldn't mix Django and angular templates, which that would be doing.

Broad answers are much appreciated, most of all just an example folder structure with the urls that make it work would be incredibly valuable, so that I can start experimenting with my self from a somewhat working base. I've been banging my head against the wall for some time with this.

Joshua Chan · Accepted Answer · 2018-05-20 01:15:43Z

3

TLDR: Use a separate path like /api/* for backend API, redirect every other route to index.html for Angular app.

I've been working with Django v1.10 + AngularJS (after which migrated to Angular). I'm using Angular/AngularJS for all front end works and only use the back end mostly to get data via API.

I've been using this folder structure:

dist (this is where I put the generated Angular bundle)
- index.html
django_app
- settings.py
- urls.py
- wsgi.py
- ...
app
- static (django static files)
- apps.py
- models.py
- urls.py
- views.py
- ...
src (Angular source code, you could move all Angular related files into a separate folder if you want to keep things clean in the root folder, i.e., angular/src)
angular.json
tsconfig.json
...

During development, I would redirect all routes to index.html for the Angular app.

In django_app\urls.py:

urlpatterns = [
    url(r'^api/', include('app.urls')),
    url(r'^admin/password_reset/$', auth_views.password_reset, name='admin_password_reset'),
    url(r'^admin/password_reset/done/$', auth_views.password_reset_done, name='password_reset_done'),
    url(r'^admin/reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>.+)/$', auth_views.password_reset_confirm, name='password_reset_confirm'),
    url(r'^admin/reset/done/$', auth_views.password_reset_complete, name='password_reset_complete'),
    url(r'^admin/', admin.site.urls, name='admin'),
]

# Serve media files locally for development
if settings.DEBUG:
    import debug_toolbar

    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += [
        url(r'^__debug__/', include(debug_toolbar.urls)),
        url(r'^.*$', staticfilesviews.serve, {'path': 'index.html'}, name='index'),
    ]

These are my settings:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'dist'),
)

In production, you should use a reverse proxy like nginx to route only Django for specific uses, e.g., calling API. Everything else should be passed to the Angular app entry index.html

edited May 20, 2018 at 1:15

answered May 19, 2018 at 13:51

Joshua Chan

1,83710 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marcus Grass Over a year ago

Great answer, the last url-pattern is a catch-all that just sends everything to the index page right? Any pointers to resources for getting the login/logout authentication right?

Joshua Chan Over a year ago

Edited my answer to include admin related routes

Collectives™ on Stack Overflow

Django Angular Folder structure to load angular templates

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related