Django-AngularJs项目结构

Question

After researching for the days I'm yet to decide what's the best structure for the AngularJs with Django.Many projects available on GitHub and tutorials on the net using angular files in Django project's static folder.This below structure is mostly followed in Angular 1 with Django.

  Project Name
     app
     project name
     templates
     static
        angular_app
            app1
               app1.component.js
               app1.module.js
             app.js
         angular_templates (static templates for rendering in routes)
     manage.py    

In Angular 2 we have to use node server and mostly as far I saw with experienced angular developers who also worked with other backend technologies, they use this structure

  AngularJs Project
      app1
         app1.component.js
         app1.module.js
       angular_templates (static templates for rendering in routes)
       app.js

  Django Project ( or any other backend project)
     app
     project name
     templates
     static
     manage.py

Advantage of this project structure: We can use any other backend technology by replacing our backend project folder. Only API is dependent on backend project.The frontend is completely independent of the backend.

So, the question is what's the best structure for the Django-Angular project? if the second option is good, we have to deploy our angular and Django code separately on the same domain? If yes how to do it ?

Answer 1

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

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

3. 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.

4. 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.

Answer 2

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