[Answered ]-Django – AngularJs Project Structure

3👍

There is a means of combining the two if you wish. I do something similar with a Rails back end and it serves me well. (Note that i’m not familiar with Django, but i assume the same logic applies.)

Assuming that the static folder in your Django project will serve anything in there as static content, i wouldn’t recommend including your Angular project in that folder. Instead, let your Angular folder be a sibling folder to the static folder. However, configure your Angular project to build its final output into the Django static folder.

So, your project looks like:

 Django Project ( or any other backend project)
     app
     project name
     templates
     static  (receives minified output from AngularJS project)
     manage.py
     AngularJs Project
        app1
           app1.component.js
           app1.module.js
        angular_templates (static templates for rendering in routes)
        app.js

Doing this has a few benefits:
1. The projects are still more or less separate – when doing Angular work, you work in the AngularJS folder, otherwise you work in the other folders for Django work

  1. Deployment is simpler – you build your AngularJS artifacts (js, css, index.html) and check them in. Then deploying your Django folder deploys everything

  2. you can still benefit from the tools of the AngularJS eco system because for all intents, it’s still in its own folder and isolated.

  3. Everything is in one repo, which can make source management much easier.

There are a couple of downsides – that you’re checking in AngularJS build artifacts and that your AngularJS changes get mixed with your server side changes, but i’ve found that unless the server side and client side teams are completely independent, it hasn’t proven to be an issue.

-1👍

Best practice :

  1. Separation of Concerns.
    – Each module/component/controller should be independent from the other.
  2. Mode of Development
    – Based on the role of team (full stack developer/UI separate /Backend separate. Folder structure changes
  3. Outstanding Style Guide Angular 1
  4. Official style guide for Angular 2

Leave a comment