在 Angular 1.6 中使用 URL hash-bang （#!/）前缀代替简单的 hash（#/）-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 1.6 中，URL hash-bang 前缀成为了推荐的方式来使用 hash 模式路由。这个前缀是由叹号和斜线组成，即“#!/”。相比于简单的 hash（“#/”），URL hash-bang 前缀具有更好的可读性和可维护性，并且可以让搜索引擎正确地解析 Angular 应用程序的路由。

简单的 hash 路由问题

在 AngularJS 1.5 及以前的版本中，开发人员通常会在 URL 中使用简单的 hash（“#/”）来实现单页面应用程序（SPA）的路由。例如，一个包含两个视图的简单的 SPA 可以如下定义：

<div ng-app="myApp">
  <a href="#/view1">View 1</a>
  <a href="#/view2">View 2</a>
  
  <ng-view></ng-view>
</div>

这段代码中，我们定义了两个链接，分别指向“#/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 改写如下：

<div ng-app="myApp">
  <a href="#!/view1">View 1</a>
  <a href="#!/view2">View 2</a>
  
  <ng-view></ng-view>
</div>

这段代码中，我们只是将 hash 改成了“#!/”，其余部分保持不变。这样做有以下好处：

对于搜索引擎来说，URL 中的 hash-bang 前缀被认为是独立的 URL 部分，可以被正确地解析和索引。
对于用户来说，URL 中的 hash-bang 前缀更易于理解和分享。他们可以直接复制和分享包含 hash-bang 前缀的 URL，而无需担心其他人无法正确地访问应用程序。

在 AngularJS 中启用 hash-bang 模式

为了在 AngularJS 应用程序中启用 hash-bang 模式，我们需要在应用程序的配置阶段使用 $locationProvider 进行设置。具体来说，我们需要将html5Mode属性设置为false，并将hashPrefix属性设置为“#!/”。例如：

angular.module('myApp', [])
  .config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix('!');
  }]);

这样做会将 AngularJS 的路由引擎配置为使用 hash-bang 前缀，并且禁用 HTML5 模式。现在，我们可以像上面的示例代码一样在应用程序中使用 hash-bang 路由了。

总结

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/29987