1

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 ?

Improve this question

2 Answers 2

Reset to default
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.

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

2 Comments

Thanks, @snorkpete for the detailed answer. Yes, it's like the same as you said. We can put all our angularJs project code in the static file and serve them with the project. Before accepting your answer I'm still waiting for the detailed code structure from the expert Django angularJs developer.
I'm actually advising AGAINST putting the AngularJS code in the static folder - this is because you'll be serving your AngularJS source code to the public as well, which you don't want to do. That's why i recommend moving the Angular JS project outside of the static folder and just have the compiled/minified AngularJS build output in your static folder
-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
Improve this answer

3 Comments

Right Aravind but I'm asking about backend code structure with angular
Backend code means any server side framework code with front side angularjs code.
it depends on the framework you use. .NET has a MVC architecture, Java has similar one. like wise depends on the technology specific

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.