背景
在现代 web 开发中，单页面应用（SPA）已经非常流行，AngularJS 作为最受欢迎的前端框架之一，在构建 SPA 应用方面有着广泛的应用。然而，许多企业和机构仍然在使用老旧的浏览器，比如 Microsoft Internet Explorer 8（以下简称 IE8），这个浏览器不支持许多现代 web 开发技术，使得 SPA 应用在 IE8 下的兼容性问题成为许多开发者所关注的问题。
问题
在 IE8 中，第一个遇到的问题是 JavaScript 的兼容性问题。IE8 不支持一些 ES5 的 API，例如 Array.prototype.forEach()、Array.prototype.indexOf() 等等，这些 API 在现代浏览器中都得到了广泛的应用。同时，IE8 中也不支持一些新的浏览器对象，例如 XMLHttpRequest 2、localStorage 等等。这些问题需要针对性的解决。
在 AngularJS 中，还有一个问题是它默认的渲染方式是使用 document.createDocumentFragment()，而在 IE8 中，这个 API 带来了许多问题，使得许多 ng-repeat 和 ng-if 等等指令不能正确工作。
解决方案
1. JavaScript 兼容性问题
针对 ES5 的新 API，可以使用一些 shims 或者 polyfills 库，比如 es5-shim 和 es5-sham，这些库可以模拟出现代浏览器中不存在的 API，使得旧版的浏览器也能够运行相应的代码。
另外，可以使用一些兼容性更好的库来代替一些新的浏览器对象，比如使用 jQuery 或者 AngularJS 自带的 jQuery-lite 库来进行 AJAX 请求，使用 cookies 或者 sessionStorage 来替换 localStorage 等等。
2. AngularJS 渲染问题
对于 AngularJS 的渲染问题，可以采用 ng-include 来替代 ng-repeat 和 ng-if 等等指令。ng-include 会将引入的 HTML 片段直接添加到 DOM 中，避免了 document.createDocumentFragment() 带来的问题。同时，ng-include 也兼容性更好，更容易维护。
3. AngularJS 模块加载问题
除此之外，还需要解决一些与 AngularJS 模块加载相关的问题。IE8 中不支持 AngularJS 自带的 module，因此需要使用一个叫做 es5-shim-sham 的库来解决这个问题。这个库可以解决一些 IE8 对于 ECMAScript 5 的不兼容性问题，并且提供了一些模块加载的 polyfills。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- --- -- -----------
------- ---------------------------------------------------------------------------------------
------- --- -- ---
------- -------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
------------
-------
----- ---------------
---- ---------------------------------------------
------- --- -- ---
------- -----------------------------------------------------------------------------------------------
------------
--------
-- ------ --- ----- ------
----------------------- ----
---------
-------
-------在上面的示例代码中，我们首先在文档头部引入了一些 polyfills 库，针对 IE8 中对于 ES5、jQuery 和模板引擎的不兼容性进行了解决。然后，我们在 body 中使用了 ng-include 来加载 HTML 片段，从而避免了 document.createDocumentFragment() 带来的问题。最后，我们也使用了 es5-shim-sham 来解决 AngularJS 模块加载的问题。
总结
在现代 web 开发中，IE8 下的兼容性问题已经成为了一个非常棘手的问题。针对 AngularJS SPA 应用在 IE8 下的兼容性问题，我们可以采用一些 shims 或者 polyfills 库来模拟现代浏览器中不存在的 API；使用 ng-include 来替代 ng-repeat 和 ng-if 等等指令；最后，使用 es5-shim-sham 来解决 AngularJS 模块加载的问题。整个过程需要深入了解 AngularJS 的运行机制，对前端技术有一定的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bd99e48841e9894a265bb