Python Django-REST框架和Angularjs的文件夹结构

时间:2013-10-24 12:55:32

标签: python django mongodb rest angularjs

我将开始一个项目,其中我将使用带有restangular和Mongodb的AngularJs的休息框架的pyhon django。我应该开始用angularjs编写我的客户端应用程序,然后关注应该是什么文件夹结构,以便我可以挂钩我的后端。或者我应该首先考虑文件夹结构,然后继续。    即使在第二个选项中,我也很困惑我应该在哪种类型的文件夹结构,因为我对所有这些技术都很天真。到现在我对文件夹结构的看法是这样的..

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

请帮助..任何建议都将不胜感激......

2 个答案:

答案 0 :(得分:16)

这是我接近这个的方式。其他人主张完全解耦你的django和angularjs应用程序,但这可能适合你。

您有两个应用程序,帐户应用程序和其他应用程序。您希望在两者中创建模块化角度应用程序,可以“插入”另一个django项目(只需很少的修改)。

帐户应用程序静态文件结构:

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

其他App静态文件结构:

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

App 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模板,而是使用基于Django的AngularJS模板,以便在渲染角度模板时传递很酷的东西,比如django-crispy-forms或使用django渲染整个应用程序视图,然后只使用angular修改它们。

任何角度应用程序内的部分Django-controllers目录(例如,帐户应用程序或其他应用程序):

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

任何角度应用程序内的部分模板目录(例如,帐户应用程序或其他应用程序):

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

答案 1 :(得分:5)

如果您使用的是两个不同的域名。这是我如何做的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