在 Angular/Django SPA 中存储 ng 模板的最佳位置是什么

Question

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

我有很多这样的 ng 模板：

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

现在，它们都在一个base.html 文件中，因此模板代码变得混乱。

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

以下是我能想到的选项：

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

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

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

  {% if user.is_authenticated() %}

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

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

  $routeProvider .when('/search', { templateUrl: 'static/ng-templates/search.html', controller: 'SearchController', })

但是，你猜怎么着？ Django 在生产环境中不提供静态目录中的文件，至少在Heroku 中是这样。配置它来做到这一点真是让人头疼。

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

我的问题是：

有什么更好的方法来做到这一点？

Answer 1

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

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

1) 解决方法是在服务器端编译模板（在某些视图中）并使用 ajax 获得编译的 html。但是，再次强调，这不是一个好方法，最好考虑分解。

2) 如果您需要动态加载静态文件，则需要将静态 url 保存在 javascript 中的某个位置。例如，您可以在 django 模板中使用标记并制作全局变量（全局变量是不好的做法，但有时它们会有所帮助），例如 window.static_url= "/static/"。