Folder Structure for Python Django-REST-framework and Angularjs
Here's how I approached this. Others have advocated completely decoupling your django and angularjs applications but this might work for you.
You have two apps, Account App and Other App. You want to create modular angular applications in both that can be "plugged" into another django project (with minimal modifications).
Account App static file structure:
│ ├── static│ │ └── app│ │ └── js│ │ ├── apps│ │ │ └── accountApp.js│ │ ├── controllers│ │ │ └── accountControllers.js│ │ ├── directives│ │ │ └── accountDirectives.js│ │ ├── filters│ │ │ └── accountFilters.js│ │ └── services│ │ └── accountServices.js
Other App static file structure:
│ ├── static│ │ └── app│ │ └── js│ │ ├── apps│ │ │ └── otherApp.js│ │ ├── controllers│ │ │ └── otherControllers.js│ │ ├── directives│ │ │ └── otherDirectives.js│ │ ├── filters│ │ │ └── otherFilters.js│ │ └── services│ │ └── otherServices.js
App Base file structure:
│ ├── static│ │ ├── app│ │ │ ├── js│ │ │ │ ├── app.js│ │ │ │ ├── controllers.js│ │ │ │ ├── directives.js│ │ │ │ ├── filters.js│ │ │ │ └── services.js
Main project static file folder (after running manage.py collectstatic):
│ ├── static│ │ ├── app│ │ ├── js│ │ ├── app.js│ │ ├── controllers.js│ │ ├── directives.js│ │ ├── filters.js│ │ ├── services.js│ │ ├── apps│ │ │ └── accountApp.js│ │ │ └── otherApp.js│ │ ├── controllers│ │ │ └── accountControllers.js│ │ │ └── otherControllers.js│ │ ├── directives│ │ │ └── accountDirectives.js│ │ │ └── otherDirectives.js│ │ ├── filters│ │ │ └── accountFilters.js│ │ │ └── otherFilters.js│ │ └── services│ │ └── accountServices.js│ │ └── otherServices.js
Instead of using just regular AngularJS templates, use Django-powered AngularJS templates so you can pass cool stuff when rendering angular templates, like django-crispy-forms or render entire app views with django then only modify them with angular.
Partials Django-controllers directory inside any angular app (eg Account App or Other App):
│ ├── partials│ │ ├── __init__.py│ │ ├── urls.py│ │ ├── views.py
urls.py
urlpatterns = patterns('users.partials.views', url(r'^list/$', UserPartialListView.as_view(), name="list"), url(r'^detail/$', UserPartialDetailView.as_view(), name="detail"), )views.py
# can pass any global context or methods herefrom app_base.views import PartialView# pass app global context or methods hereclass UserPartialView(PartialView): template_name = "users/partials/base.html"# view specific context or methods hereclass UserPartialListView(UserPartialView): template_name = "users/partials/list.html"# view specific context or methods hereclass UserPartialDetailView(UserPartialView): template_name = "users/partials/detail.html"
Partials Templates directory inside any angular app (eg Account App or Other App):
│ ├── templates│ │ └── accounts│ │ └── partials│ │ ├── base.html│ │ ├── detail.html│ │ └── list.html
Main Partials Django-router:
# myapp.partials.urlsurlpatterns = patterns('', url(r'^accounts/', include('accounts.partials.urls', namespace="accounts_partials")), url(r'^others/', include('others.partials.urls', namespace="others_partials")), )Full Example Directory Structure:
├── accounts│ ├── __init__.py│ ├── forms.py│ ├── management│ │ ├── __init__.py│ │ └── commands│ │ ├── __init__.py│ │ ├── importbusinesses.py│ ├── models.py│ ├── partials│ │ ├── __init__.py│ │ ├── urls.py│ │ ├── views.py│ ├── permissions.py│ ├── serializers.py│ ├── static│ │ └── app│ │ └── js│ │ ├── apps│ │ │ └── accountApp.js│ │ ├── controllers│ │ │ └── accountControllers.js│ │ ├── directives│ │ │ └── accountDirectives.js│ │ ├── filters│ │ │ └── accountFilters.js│ │ └── services│ │ └── accountServices.js│ ├── templates│ │ └── accounts│ │ └── partials│ │ ├── base.html│ │ ├── detail.html│ │ └── list.html│ ├── urls.py│ ├── views.py├── api_root│ ├── __init__.py│ ├── admin.py│ ├── models.py│ ├── tests.py│ ├── urls.py│ └── views.py├── app_base│ ├── __init__.py│ ├── __init__.pyc│ ├── forms.py│ ├── models.py│ ├── models.pyc│ ├── static│ │ ├── LICENSE│ │ ├── README.md│ │ ├── app│ │ │ ├── css│ │ │ │ └── app.css│ │ │ ├── img│ │ │ ├── js│ │ │ │ ├── app.js│ │ │ │ ├── apps│ │ │ │ │ └── accountApp.js│ │ │ │ ├── controllers│ │ │ │ ├── controllers.js│ │ │ │ ├── directives│ │ │ │ ├── directives.js│ │ │ │ ├── filters│ │ │ │ ├── filters.js│ │ │ │ ├── services│ │ │ │ └── services.js│ │ │ ├── lib│ │ │ │ └── angular│ │ │ │ ├── angular-animate.js│ │ │ │ ├── angular-animate.min.js│ │ │ │ ├── angular-animate.min.js.map│ │ │ │ ├── angular-cookies.js│ │ │ │ ├── angular-cookies.min.js│ │ │ │ ├── angular-cookies.min.js.map│ │ │ │ ├── angular-csp.css│ │ │ │ ├── angular-loader.js│ │ │ │ ├── angular-loader.min.js│ │ │ │ ├── angular-loader.min.js.map│ │ │ │ ├── angular-resource.js│ │ │ │ ├── angular-resource.min.js│ │ │ │ ├── angular-resource.min.js.map│ │ │ │ ├── angular-route.js│ │ │ │ ├── angular-route.min.js│ │ │ │ ├── angular-route.min.js.map│ │ │ │ ├── angular-sanitize.js│ │ │ │ ├── angular-sanitize.min.js│ │ │ │ ├── angular-sanitize.min.js.map│ │ │ │ ├── angular-scenario.js│ │ │ │ ├── angular-touch.js│ │ │ │ ├── angular-touch.min.js│ │ │ │ ├── angular-touch.min.js.map│ │ │ │ ├── angular.js│ │ │ │ ├── angular.min.js│ │ │ │ ├── angular.min.js.gzip│ │ │ │ ├── angular.min.js.map│ │ │ │ ├── errors.json│ │ │ │ ├── i18n│ │ │ │ │ ├── ...│ │ │ │ ├── version.json│ │ │ │ └── version.txt│ │ │ └── partials│ │ │ ├── partial1.html│ │ │ └── partial2.html│ │ ├── config│ │ │ ├── karma.conf.js│ │ │ └── protractor-conf.js│ │ ├── logs│ │ ├── package.json│ │ ├── scripts│ │ │ ├── e2e-test.bat│ │ │ ├── e2e-test.sh│ │ │ ├── test-all.sh│ │ │ ├── test.bat│ │ │ ├── test.sh│ │ │ ├── update-angular.sh│ │ │ ├── watchr.rb│ │ │ └── web-server.js│ │ └── test│ │ ├── e2e│ │ │ └── scenarios.js│ │ ├── lib│ │ │ └── angular│ │ │ ├── angular-mocks.js│ │ │ └── version.txt│ │ └── unit│ │ ├── controllersSpec.js│ │ ├── directivesSpec.js│ │ ├── filtersSpec.js│ │ └── servicesSpec.js│ ├── templates│ │ └── app_base│ │ ├── base.html│ │ └── index.html│ ├── urls.py│ ├── views.py
If you are using two different domains. Here is a git seed for how I do it. Feel free to use it.
.├── app/│ ├── shared/ // acts as reusable components or partials of our site│ │ ├── sidebar/│ │ │ ├── sidebarDirective.js│ │ │ └── sidebarView.html│ │ └── article/│ │ ├── articleDirective.js│ │ └── articleView.html│ ├── components/ // each component is treated as a mini Angular app│ │ ├── home/│ │ │ ├── homeController.js│ │ │ ├── homeService.js│ │ │ └── homeView.html│ │ └── blog/│ │ ├── blogController.js│ │ ├── blogService.js│ │ └── blogView.html│ ├── app.module.js│ └── app.routes.js├── assets/│ ├── img/ // Images and icons for your app│ ├── css/ // All styles and style related files (SCSS or LESS files)│ ├── js/ // JavaScript files written for your app that are not for angular│ └── libs/ // Third party libraries such as jQuery, Moment, Underscore, etc.└── index.html