我将开始一个项目,其中我将使用带有restangular和Mongodb的AngularJs的休息框架的pyhon django。我应该开始用angularjs编写我的客户端应用程序,然后关注应该是什么文件夹结构,以便我可以挂钩我的后端。或者我应该首先考虑文件夹结构,然后继续。 即使在第二个选项中,我也很困惑我应该在哪种类型的文件夹结构,因为我对所有这些技术都很天真。到现在我对文件夹结构的看法是这样的..
Root Folder
| -- api
|-- view.py
|-- url.py
|-- model.py
| -- app
|-- css
|-- js
|-- images
|-- index.html
请帮助..任何建议都将不胜感激......
答案 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种子。随意使用它。
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