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

Question

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

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

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

Answer 1

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

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

Account App静态文件结构:

?   ??? 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

使用Django驱动的AngularJS模板,而不是只使用常规的AngularJS模板,这样你就可以在渲染角度模板时传递很酷的东西,比如django-crispy-forms或用django渲染整个app视图,然后只用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

Answer 2

如果您使用两个不同的域.这是我如何做的git种子.随意使用它.

角/ 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