Django Angular文件夹结构用于加载角度模板

Question

我已经掌握了构建restapi来传递所有数据的诀窍，但是我不知道如何设置文件夹结构，以便能够通过访问URL来加载角度模板。在

让我们在我的设置.py我有一个注册的路径api，它包含我想传递给客户机的JSON数据，并且有一些angtemplate.html. 我还有一个名为apitest的Django应用程序，它从服务器获取数据，并将数据提供给angular需要从中获取数据的api。在

如何路由请求，以便当用户转到服务器上的url（如127.0.0.1:8000/apifetch）时，向用户显示angtemplate.html已经从/apifetch加载了数据？在

我意识到这是一个三重问题，涉及第一个角度的应用程序结构，第二个Django模板语法和文件夹结构，第三个url模式。在

我试图跟踪thinkster angular django tutorial，但无法将angular应用程序连接到网站。在

我自己的理论是，在apitest Django应用程序中，我创建了几个模板，并在该应用程序的静态文件夹中保存我的角度应用程序，将其作为静态加载到模板中，然后像平常一样连接url。在

不过，我听说你不应该混合Django和angular模板，这样做就可以了。在

广泛的答案是非常感谢，最重要的是一个例子文件夹结构与网址，使它工作，将是难以置信的宝贵，所以我可以开始试验我自己从某种程度上工作的基础。我的头撞到墙上有一段时间了。在

Answer 1

TLDR：对后端API使用单独的路径，如/api/*，对于角度应用，每隔一个路径重定向到index.html。在

---

我一直在使用djangov1.10+AngularJS（之后迁移到AngularJS）。 我在所有前端工作中都使用Angular/AngularJS，只使用后端通过API获取数据。在

我一直在使用这个文件夹结构：

• dist（这是我放置生成的角束的地方）
  • 在索引.html在
• django_应用程序
  • 在设置.py在
  • 在网址.py在
  • 在wsgi.py在
  • 。。。在
• 应用程序
  • 静态（django静态文件）
  • 在应用程序.py在
  • 在模型.py在
  • 在网址.py在
  • 在视图.py在
  • 。。。在
• src（Angular源代码，如果您想保持根文件夹中的内容整洁，可以将所有与Angular相关的文件移动到一个单独的文件夹中，即angular/src）
• 在角度.json在
• 在tsconfig.json文件在
• 。。。在

在开发过程中，我会将Angular应用程序的所有路径重定向到index.html。在

在django_app\urls.py中：

urlpatterns = [
    url(r'^api/', include('app.urls')),
    url(r'^admin/password_reset/$', auth_views.password_reset, name='admin_password_reset'),
    url(r'^admin/password_reset/done/$', auth_views.password_reset_done, name='password_reset_done'),
    url(r'^admin/reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>.+)/$', auth_views.password_reset_confirm, name='password_reset_confirm'),
    url(r'^admin/reset/done/$', auth_views.password_reset_complete, name='password_reset_complete'),
    url(r'^admin/', admin.site.urls, name='admin'),
]

# Serve media files locally for development
if settings.DEBUG:
    import debug_toolbar

    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += [
        url(r'^__debug__/', include(debug_toolbar.urls)),
        url(r'^.*$', staticfilesviews.serve, {'path': 'index.html'}, name='index'),
    ]

以下是我的设置：

^{pr2}$

---

在生产中，您应该使用nginx这样的反向代理来只路由Django用于特定用途，例如调用API。其他所有内容都应该传递给Angular app entryindex.html