javascript - 在 Angular/Django SPA 中存储 ng-templates 的最佳位置是什么

Question

我正在使用 Django 和 AngularJS 构建 SPA。

我有很多像这样的 ng-templates:

<script type="text/ng-template" id="item.html">
 // content
</script>

现在，所有这些都在一个base.html文件中，因此模板代码变得困惑。

我想将每个 ng-template 放在它自己的 html 文件中。

以下是我能想到的选项:

<强>1。模板文件夹:逻辑位置将是模板文件夹。但是当我尝试引用像 templates/ng-templates/item.html 这样的模板时，我得到了 404 Not Found。因为 Django 不提供模板，所以它使用模板进行渲染。

<强>2。静态目录:Django 确实从静态目录提供模板。但它有两个缺点:

• 服务器端的东西在单独的 html 文件中不起作用。我的意思是，如果您想检查用户是否经过身份验证，您不能这样做:

  {% if user.is_authenticated() %}

  但如果所有这些模板都存储在一个 base.html 中，这将很容易实现。原因很清楚。

• 生产中的问题。我想从 Amazon S3 提供我所有的静态文件并配置我的设置来做到这一点，这意味着当我这样做时 {% static 'css/main.css' %} Django 会自动给我一个正确的网址。但是，该 {% static %} 在 Angular 代码中不可用。因此，您必须对 url 进行硬编码，如下所示:

  $routeProvider
.when('/搜索', {
templateUrl: 'static/ng-templates/search.html',
Controller :'搜索 Controller '，
})

但是，你猜怎么着？ Django 在生产环境中不提供来自静态目录的文件，至少在 Heroku 中是这样。将它配置成这样做是一件非常痛苦的事情。

所以，我回到我原来的代码:将所有 ng-templates 保存在一个 base.html 中。

我的问题是:

执行此操作的更好方法是什么？

Answer 1

最好将 ng-templates 与静态文件放在一起。如果您需要在 ng-templates 中使用 django 标签，我想是出了什么问题，因为您正在尝试混合逻辑。

所以，我们在这里向您介绍静态目录的问题:

1) 解决方法是在服务器端编译模板(在某些 View 中)并使用 ajax 获取编译后的 html。但是，同样，这不是一个好方法，最好考虑分解。

2) 如果你需要动态加载静态文件，你需要在 javascript 的某个地方保留静态 url。例如，您可以在 django 模板中使用标签并制作全局变量(全局变量是不好的做法，但有时它们可​​以提供帮助)，如 window.static_url= "/static/"。