AngularJS最佳实践 – 模板与Javascript

默认情况下,Angular在用户导航到路径时从服务器获取 HTML模板.考虑到这一点,想象一下这种情况：

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

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

如果是这样,是否有与此问题相关的最佳做法？

我想一个解决方案是让Angular在app初始化时获取所有模板.但是,如果应用程序有数百个HTML视图,这可能会降低性能.

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

例如,您不是使用login.html,而是使用login-xyz.html作为模板的名称. xyz可以是随机值,也可以是文件的校验和.校验和可能是一个稍好的选择,因为如果新版本很小(即你只修复了一个文件中的一些小错误),如果用户加载任何页面而不是固定版本,他/她将不会被重新加载 – 所有其他文件将具有相同的校验和,它们将无中断地工作.

这样,当过时的Anguar应用程序尝试获取模板时,它会收到HTTP 404错误.作为补充,您可以编写一个简单的$http interceptor,它将检测404响应,并自动重新加载页面(或为用户提供这样做的选项).

有些模块能够重命名资产,例如gulp-rev – 但我从来没有听说过将其用于Angular模板.不过,您可以自己实现类似的功能.

当然,您可能希望保留新旧版本的文件,以允许用户在不中断刷新的情况下工作.取决于您的要求.不过,我假设你试图避免这种情况.

样本404 拦截器(CoffeScript,因为我现在很方便)：

m.factory 'notFoundInterceptor',($q) ->
  return {
    responseError: (response) ->
        if response?.status == 404
            # Reload,or warn user
            return $q.defer()

        # Not a 404,so handle it elsewhere
        $q.reject response
  }

m.config ($httpProvider) ->
  $httpProvider.interceptors.push 'notFoundInterceptor'

AngularJS最佳实践 – 模板与Javascript

相关文章