AngularJS最佳实践-模板与Javascript

默认情况下，Angular在用户导航到路由时从服务器获取HTML模板。考虑到这一点，想象一下这样的场景：

• 用户加载Angular应用程序。主视图有一个子页面称为“Order”
• 当用户正在研究主视图时，新版本的应用程序将在生产中推出。新版本使用新的Javscript和HTML完全重写了订单页面
• 用户导航到订单页面。Javascript已经在步骤1中由浏览器加载，因此用户在重新加载应用程序之前一直使用旧版本但新模板在导航时从服务器获取。现在Javascript和模板是我们的同步工具

我的假设是Javascript/HTML不同步，对吗

如果有，是否有与此问题相关的最佳做法

---

我想一个解决方案是在应用程序初始化时获取所有模板。但如果应用程序有数百个HTML视图，这可能会对性能造成影响。

我自己也从未想过这个问题。一个可能的想法是重用称为资产版本控制的模式，在新版本中，您可以重命名所有资产

例如，您将使用

login xyz.html

作为模板的名称，而不是

login.html

xyz

可以是随机值，也可以是文件的校验和。校验和可能是一个更好的选择，因为如果新版本很小（即，您只修复了一个文件中的一些小错误），如果用户加载了除已修复页面以外的任何页面，他/她都不会为重新加载而烦恼-所有其他文件都将具有相同的校验和，它们将不会中断工作

这样，当一个过时的Anguar应用程序试图获取模板时，它会得到一个

HTTP404

错误。除此之外，您还可以编写一个简单的脚本，它将检测

404

响应，并自动重新加载页面（或者为用户提供这样做的选项）

有一些模块能够重命名资产，例如-但我从未听说过将其用于角度模板。不过，您可以自己实现类似的功能

当然，您可能希望保留文件的新版本和旧版本，以允许用户在不中断刷新的情况下工作。这取决于你的要求。不过，我想你是想避免这种情况

---

示例

404

拦截器（CoffeScript，我现在手边有）：

---

我很久以前就读过这个问题，其中一个选择是对更改的页面和application.js文件进行版本控制

例如，在应用程序的版本1上，您可以在html文件上使用以下内容：

<script src="js/angular_app_v1.js"></script>

---

因此，当您推出新版本时，您不会覆盖模板，并且在重新加载浏览器之前，正在工作的用户将使用旧版本，但不会出现版本不一致的情况。

使用文件名对资产进行版本控制，即使是中端应用程序也无法维护

尽管这是一种针对web资产的重量级方法，但您可以研究内容协商。这就是对资源（通常是RESTAPI）的调用返回资源版本的地方，

Content-Type:application/vnd.contentful.delivery.v1+json.

。在客户端上，您可以检查版本是否符合预期。因此，如果客户端只知道如何加载v1.1和v1.2的资源响应，UI就会知道它无法处理这些响应，应该重新加载页面

---

另一种可能是在UI中预先加载所有模板。Grunt中有一些构建过程，您可以运行这些过程，将所有模板组合到一个文件中进行交付，然后将它们加载到$templateCache中，这样就不会有任何请求到达服务器。

如果您有某种服务器端语言，您可以使用（.NET、Rails、Java或其他语言）构建过滤器，并将版本号与模板请求一起传递。如果客户端请求的版本比部署的版本旧，则会向客户端发送错误。您的客户端将监视该错误（$http拦截器），并强制页面刷新以提取较新的javascript代码。（可能会先向用户显示警报，以便他们知道发生了什么）。

您可以将所有模板预加载到$templateCache中，并将其作为一个templates.js文件提供。这有一个吞咽任务。然后，应用程序将在一个请求中加载所有模板，并在启动时加载应用程序脚本，因此它们将同步。阅读更多信息

有一个版本号并在同步资源时使用它总是有意义的。这不仅适用于您描述的用例，也适用于其他情况，例如回滚到特定版本或有两个版本处于活动状态且可用（例如，为了让一些用户预览下一个版本）

感谢您的回答

---

结果这个问题为我们自己解决了。每次我们推出新版本时，所有用户会话都会被删除，用户将被发送到登录页面。这将触发页面加载，并加载新的JavaScript/HTML。

使用html2js（）如何，这样您甚至不必从服务器检索HTML？最初加载的代码更多，但对服务器的请求却少得多（这也可能会导致性能下降）。谢谢大家的回答。我将试用其中一些，并向您汇报。

<script src="js/angular_app_v1.js"></script>

templateUrl: 'templates/view_product_v1.html'