La guía o código que hallarás en este artículo es la solución más fácil y válida que hallamos a esta inquietud o problema.
Solución:
Así es como me acerqué a esto. Otros han abogado por desacoplar completamente sus aplicaciones django y angularjs, pero esto podría funcionar para usted.
Tiene dos aplicaciones, aplicación de cuenta y otra aplicación. Desea crear aplicaciones angulares modulares en ambos que se puedan “conectar” a otro proyecto de django (con modificaciones mínimas).
Aplicación de cuenta static estructura de archivo:
│ ├── static │ │ └── app │ │ └── js │ │ ├── apps │ │ │ └── accountApp.js │ │ ├── controllers │ │ │ └── accountControllers.js │ │ ├── directives │ │ │ └── accountDirectives.js │ │ ├── filters │ │ │ └── accountFilters.js │ │ └── services │ │ └── accountServices.js
Otra aplicación static estructura de archivo:
│ ├── static │ │ └── app │ │ └── js │ │ ├── apps │ │ │ └── otherApp.js │ │ ├── controllers │ │ │ └── otherControllers.js │ │ ├── directives │ │ │ └── otherDirectives.js │ │ ├── filters │ │ │ └── otherFilters.js │ │ └── services │ │ └── otherServices.js
Estructura de archivos de la base de la aplicación:
│ ├── static │ │ ├── app │ │ │ ├── js │ │ │ │ ├── app.js │ │ │ │ ├── controllers.js │ │ │ │ ├── directives.js │ │ │ │ ├── filters.js │ │ │ │ └── services.js
Proyecto principal static carpeta de archivos (después de ejecutar 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
En lugar de usar solo plantillas AngularJS regulares, use plantillas AngularJS impulsadas por Django para que pueda pasar cosas interesantes al renderizar plantillas angulares, como django-crispy-forms o renderizar vistas de aplicaciones completas con django y luego modificarlas solo con angular.
Directorio de controladores de Django parciales dentro de cualquier aplicación angular (por ejemplo, aplicación de cuenta u otra aplicación):
│ ├── 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"
Directorio de plantillas parciales dentro de cualquier aplicación angular (por ejemplo, aplicación de cuenta u otra aplicación):
│ ├── templates │ │ └── accounts │ │ └── partials │ │ ├── base.html │ │ ├── detail.html │ │ └── list.html
Parciales principales 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")),
)
Estructura de directorio de ejemplo completo:
├── 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
Si está utilizando dos dominios diferentes. Aquí hay una semilla de git sobre cómo lo hago. Sientase libre de usarlo.
Semilla Angular / Django
.
├── 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
Valoraciones y comentarios
No se te olvide dar difusión a este post si te fue de ayuda.