start - Estructura de carpetas para Python Django-REST-framework y Angularjs

pip3 install rest_framework

Question

Voy a comenzar un proyecto en el que usaré pyhon django con el marco de descanso, AngularJs con restangular y Mongodb. ¿Debería comenzar a escribir mi aplicación del lado del cliente con angularjs y luego preocuparme por la estructura de carpetas para poder conectar mi back-end? O primero debería pensar en la estructura de la carpeta y luego proceder. Incluso en la segunda opción, estoy confundido acerca de qué tipo de estructura de carpetas debería estar allí, ya que soy ingenuo con todas estas tecnologías. Hasta ahora, lo que he pensado de la estructura de carpetas es así ...

Root Folder
| -- api
     |-- view.py
     |-- url.py
     |-- model.py
| -- app
     |-- css
     |-- js
     |-- images
     |-- index.html

Por favor ayuda ... Cualquier sugerencia sería apreciada ...

Answer 1

Así es como me acerqué a esto. Otros han recomendado el desacoplamiento completo de sus aplicaciones django y angularjs, pero esto podría funcionar para usted.

Tienes dos aplicaciones, aplicación de cuenta y otra aplicación. Desea crear aplicaciones angulares modulares que se puedan "conectar" a otro proyecto de django (con modificaciones mínimas).

Estructura de archivos estáticos de la aplicación de cuenta:

│   ├── static │   │   └── app │   │   └── js │   │   ├── apps │   │   │   └── accountApp.js │   │   ├── controllers │   │   │   └── accountControllers.js │   │   ├── directives │   │   │   └── accountDirectives.js │   │   ├── filters │   │   │   └── accountFilters.js │   │   └── services │   │   └── accountServices.js

Otra estructura de archivos estáticos de aplicaciones:

│   ├── static │   │   └── app │   │   └── js │   │   ├── apps │   │   │   └── otherApp.js │   │   ├── controllers │   │   │   └── otherControllers.js │   │   ├── directives │   │   │   └── otherDirectives.js │   │   ├── filters │   │   │   └── otherFilters.js │   │   └── services │   │   └── otherServices.js

Estructura de archivos de App Base:

│   ├── static │   │   ├── app │   │   │   ├── js │   │   │   │   ├── app.js │   │   │   │   ├── controllers.js │   │   │   │   ├── directives.js │   │   │   │   ├── filters.js │   │   │   │   └── services.js

Carpeta de archivos estáticos del proyecto principal (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 plantillas AngularJS normales, use plantillas AngularJS con Django para que pueda pasar cosas geniales al renderizar plantillas angulares, como django-crispy-forms o renderizar vistas de aplicaciones completas con django y luego solo modificarlas con angular.

Directorio de Django-controllers 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"), )

vistas.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

Partidas 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")), )

Ejemplo completo de la estructura del directorio:

├── 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

Answer 2

Si está utilizando dos dominios diferentes. Aquí hay una semilla de git por cómo lo hago. Sientase libre de usarlo.

Angular / Django Seed

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