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

Question

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

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

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

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

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

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

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

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

Answer 1

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

---

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

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

• dist（这是我放置生成的 Angular 包的地方）
  • index.html
• django_app
  • settings.py
  • urls.py
  • wsgi.py
  • ...
• 应用程序
  • 静态（django 静态文件）
  • apps.py
  • models.py
  • urls.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