Структура папок для Python Django-REST-framework и Angularjs

Я собираюсь запустить один проект, в котором я собираюсь использовать pyhon django с рамой отдыха, AngularJs с restangular и Mongodb. Должен ли я просто начать писать приложение на стороне клиента с помощью angularjs, а затем беспокоиться о том, что должно быть структурой папок, чтобы я мог подключить мой back-end. Или я должен сначала подумать о структуре папок, а затем продолжить. Даже во втором варианте я смущен тем, что я должен использовать тип папок, поскольку я наивный для всех этих технологий. До сих пор то, что я думал о структуре папок, выглядит следующим образом.

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

Пожалуйста, помогите.. Любые предложения будут оценены...

Ответ 1

Если вы используете два разных домена. Вот семя git, как я это делаю. Не стесняйтесь использовать его.

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

Ответ 2

Вот как я подошел к этому. Другие выступают за полное развязывание приложений django и angularjs, но это может сработать для вас.

У вас есть два приложения, приложение для учетной записи и другое приложение. Вы хотите создать модульные приложения angular, которые могут быть "подключены" к другому проекту django (с минимальными изменениями).

Статическая структура содержимого учетной записи приложения:

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

Другая статическая структура файла приложения:

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

Структура файла приложения Base:

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

Основная папка статического файла проекта (после запуска 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

Вместо использования только обычных шаблонов AngularJS используйте шаблоны AngularJS с поддержкой Django, чтобы вы могли передавать интересные вещи при рендеринге шаблонов angular, например, django-crispy-forms или визуализировать все виды приложений с помощью django, а затем изменять их только с помощью angular.

Partials Каталог Django-контроллеров внутри любого приложения angular (например, приложение для учетной записи или другое приложение):

│   ├── 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 внутри любого приложения angular (например, приложение для учетной записи или другое приложение):

│   ├── templates
│   │   └── accounts
│   │       └── partials
│   │           ├── base.html
│   │           ├── detail.html
│   │           └── list.html

Основные частицы 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")),
    )

Полная структура каталогов:

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