Reputation: 607
Folder Structure for Python Django-REST-framework and Angularjs
I am going to start one project in which i am going to use pyhon django with rest framework, AngularJs with restangular and Mongodb. Should I just start writing my client side application with angularjs and then concern about what should be folder structure such that i can hook my back-end. Or I should first think about folder structure and then proceed . Even in 2nd option I am confused about what i type of folder structure should be there , as i am naive to all these technologies. Till now what i have thought of folder structure is like this..
Root Folder
| -- api
|-- view.py
|-- url.py
|-- model.py
| -- app
|-- css
|-- js
|-- images
|-- index.html
Please help..Any suggestions would be appreciated...
Upvotes: 20
Views: 10691
Answers (2)
Reputation: 8427
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
Upvotes: 8
Reputation: 680
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 here
from app_base.views import PartialView
# pass app global context or methods here
class UserPartialView(PartialView):
template_name = "users/partials/base.html"
# view specific context or methods here
class UserPartialListView(UserPartialView):
template_name = "users/partials/list.html"
# view specific context or methods here
class 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.urls
urlpatterns = 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
Upvotes: 17
Related Questions
- Is there any way to integrate angular as the front-end portion in a django environment?
- Proper project structuring
- What should be the directory structure for a REST API in Django?
- Django Angular Folder structure to load angular templates
- Directory structure for large django rest framework apps
- How do i organize my angularjs page?
- What is the right way to setup urls.py for django-rest-framework + angular-route + static files?
- Best project structure for django & angularjs
- Django, Django-Angular and the Django Rest Framework
- Django REST API/AngularJS Application