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
