python - 用于加载 Angular 模板的 Django Angular 文件夹结构

Question

我已经掌握了构建 REST API 来传递所有数据的窍门，但我无法了解如何设置文件夹结构以便能够通过访问 URL 来加载 Angular 模板。

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

如何路由请求，以便当用户访问我的服务器上的 URL(例如 127.0.0.1:8000/apifetch)时，用户会看到已从/apifetch 加载数据的 angtemplate.html？

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

我尝试遵循thinkster angular django tutorial ，但无法将 Angular 应用程序连接到网站。

我自己的理论是，在 apitest Django 应用程序中，我创建了一些模板，并在该应用程序的静态文件夹中保留我的 Angular 应用程序，将其作为静态加载到模板中，并像通常那样连接 url 。

但是我听说你不应该混合使用 Django 和 Angular 模板，否则就会这样做。

非常感谢广泛的答案，最重要的是，只是一个示例文件夹结构以及使其工作的网址将非常有值(value)，这样我就可以从一个有点工作的基础开始自己进行实验。一段时间以来我一直在用头撞墙。

Answer 1

TLDR:对后端 API 使用单独的路径，例如 /api/*，对于 Angular 应用程序，将所有其他路由重定向到 index.html .

<小时/>

我一直在使用 Django v1.10 + AngularJS(之后迁移到 Angular)。 我将 Angular/AngularJS 用于所有前端工作，并且仅使用后端主要通过 API 获取数据。

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

• dist(这是我放置生成的 Angular 包的位置)
  • index.html
• django_app
  • 设置.py
  • url.py
  • wsgi.py
  • ...
• 应用程序
  • 静态(django静态文件)
  • apps.py
  • 模型.py
  • url.py
  • views.py
  • ...
• src(Angular 源代码，如果您想保持根文件夹中的内容干净，您可以将所有 Angular 相关文件移动到单独的文件夹中，即 angular/src)
• Angular .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'),
    ]

这些是我的设置:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.10/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'dist'),
)

<小时/>

在生产中，您应该使用像 nginx 这样的反向代理来仅路由 Django 以满足特定用途，例如调用 API。其他所有内容都应传递到 Angular 应用程序条目 index.html