其他选项 1

Question

我使用AngularJS获得了一个带有大量JavaScript和模板文件的django应用程序。

在我的django模板中，我可以使用{% static %}标记正确引用这些文件，如下所示：

<script src="{% static "angular/myapp.app.js" %}"></script>

但是，外部文件本身显然是do not get resolved through django's templating framework，所以这不是一个选项。所以人们最常做的就是对那里的静态路径进行硬编码：

$routeProvider.when('/', {
   // this works but is not ideal
   templateUrl: '/static/pages/some-angular-template.html',  
})

我已经看到了将STATIC_URL加载到某个地方的javascript并使用它来构造引用的建议。像这样：

Django模板：

var STATIC_URL = {{ STATIC_URL }};
function getStaticUrl(templatePath) {
  return STATIC_URL + templatePath;
}

外部JS ：

$routeProvider.when('/', {
   templateUrl: getStaticUrl('/pages/some-angular-template.html'),
})

这有点好，但仍然不完美，因为它只处理基本路径。如果您想使用ManifestStaticFilesStorage（我这样做），那么您仍然无法正确解析该文件。

这个问题有什么好的解决方案吗？我正在考虑的选项：

将所有必要的URL引导到django模板中的JS变量
使用data标记将网址存储在一些隐藏的HTML标记中（再次通过django模板）
创建一个API来获取网址（这看起来很疯狂，而且表现得非常糟糕）。

只是想知道是否有解决此问题的标准做法或图书馆？我已多次遇到这个问题，但从未找到过令人满意的解决方案。

Answer 1

我目前的解决方案（如果不是最优雅的话，效果很好）只是在django模板中创建一个庞大的全局常量字典，然后直接在JS中引用它们。

Django模板：

<script type="text/javascript">
    NG_STATIC_FILES = {
       "HOME": "{% static '/pages/home.html' %}",
       "SOMETHING_ELSE": "{% static '/pages/some-angular-template.html' %}",
    };
</script>

外部JS ：

$routeProvider.when('/', {
    templateUrl: NG_STATIC_FILES.SOMETHING_ELSE,
})

等

Answer 2

其他选项 1

使用您的 getStaticUrl 函数，但还要附加一个查询字符串，例如 ?v=abc，其中 abc 对于您的应用程序的每个部署版本都是唯一的，以破坏缓存。（例如，您的 html 定义了 window.ASSET_VERSION = 'abc'，当您部署应用的新版本时，您的 html 定义了 window.ASSET_VERSION = 'xyz'。）

优点：

不需要庞大的全局字典。
- 不需要维护它。
- 在一个地方（如果这很重要）寻找您的应用的用户（包括恶意用户）可以看到有关您应用的较少信息。可能会节省服务器成本。

缺点：

在部署新版本应用的过程中，当用户访问网站时，他们的浏览器会收到新的静态资源和旧的 html，不匹配可能会导致用户遇到错误。
如果您使用 CDN（如 CloudFront），则必须将其配置为在缓存键中包含查询字符串。
可能会使 A/B 测试变得不可能？
在部署新版本的应用程序时，必须在部署新的 html 服务器之前上传新的静态资产，否则您的一些用户会长时间错误地使用旧的静态资产。（如果用户在部署期间访问您的站点，他们的浏览器将收到新的 html 和旧的静态资产，将使用新的查询字符串缓存这些旧资产，并将继续使用这些旧资产，直到用户手动清除缓存，缓存的响应过期，或者下一次部署发生。）

其他选项 2

类似于“创建 API 以获取 URL”：将包含 URL 的字典放入静态 json 文件中，并使您的 getStaticUrl 函数在获取 json 文件后返回解析为请求的 url 的 Promise .在 json 文件名或缓存破坏查询字符串中放置版本 ID（见上文），以便缓存 json 文件。

优点：

性能可能会更好，因为 URL 数据缓存在浏览器中。
可能会节省服务器成本。

缺点：

所有需要这些 URL 之一的 JavaScript 都必须异步。（可能是交易破坏者。）
- 软件工程师必须花费更多时间（昂贵）。

从外部javascript

2 个答案:

其他选项 1

其他选项 2