在 Angular 1.6 中，URL hash-bang 前缀成为了推荐的方式来使用 hash 模式路由。这个前缀是由叹号和斜线组成，即“#!/”。相比于简单的 hash（“#/”），URL hash-bang 前缀具有更好的可读性和可维护性，并且可以让搜索引擎正确地解析 Angular 应用程序的路由。
简单的 hash 路由问题
在 AngularJS 1.5 及以前的版本中，开发人员通常会在 URL 中使用简单的 hash（“#/”）来实现单页面应用程序（SPA）的路由。例如，一个包含两个视图的简单的 SPA 可以如下定义：
---- --------------- -- ------------------- ----- -- ------------------- ----- ------------------- ------
这段代码中，我们定义了两个链接，分别指向“#/view1”和“#/view2”，并且使用ng-view指令来告诉 AngularJS 在哪里插入视图。当用户点击其中一个链接时，AngularJS 将加载相应的模板并将其插入到ng-view中。
但是，这样的 hash 路由存在一些问题：
- 对于搜索引擎来说，hash 后面的内容被认为是页面中锚点的一部分，而不是独立的 URL。因此，搜索引擎无法正确地解析 hash 路由，并将其作为单独的页面进行索引。
- 对于用户来说，URL 中的简单 hash 可能会让他们感到困惑。他们可能不知道这个 hash 是什么意思，也不知道如何复制和分享包含 hash 的 URL。
URL hash-bang 前缀的优点
为了解决上述问题，AngularJS 1.6 推荐使用 URL hash-bang 前缀（“#!/”）来代替简单的 hash。例如，我们可以将上面的 SPA 改写如下：
---- --------------- -- -------------------- ----- -- -------------------- ----- ------------------- ------
这段代码中，我们只是将 hash 改成了“#!/”，其余部分保持不变。这样做有以下好处：
- 对于搜索引擎来说，URL 中的 hash-bang 前缀被认为是独立的 URL 部分，可以被正确地解析和索引。
- 对于用户来说，URL 中的 hash-bang 前缀更易于理解和分享。他们可以直接复制和分享包含 hash-bang 前缀的 URL，而无需担心其他人无法正确地访问应用程序。
在 AngularJS 中启用 hash-bang 模式
为了在 AngularJS 应用程序中启用 hash-bang 模式，我们需要在应用程序的配置阶段使用 $locationProvider 进行设置。具体来说，我们需要将html5Mode属性设置为false，并将hashPrefix属性设置为“#!/”。例如：
----------------------- ---
----------------------------- --------------------------- -
-----------------------------------
----------------------------------
----这样做会将 AngularJS 的路由引擎配置为使用 hash-bang 前缀，并且禁用 HTML5 模式。现在，我们可以像上面的示例代码一样在应用程序中使用 hash-bang 路由了。
总结
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29987