为什么 MEAN.js 应用程序的 URL 以 # 开头！答案

【问题标题】：Why MEAN.js applications'URL start with #!为什么 MEAN.js 应用程序的 URL 以 # 开头！
【发布时间】：2015-02-17 19:04:09
【问题描述】：

我刚刚使用MEAN.JS 开始了我的第一个 MEAN 应用程序构建。发现mean.js如何组织应用程序后，我想知道为什么URL以/#!/开头。

例如我想要的登录页面：

http://example.com/login

代替：

http://example.com/#!/login

所以我查看了 Express 和 Angular 文档，但一无所获。我还阅读了完整的 MEAN.JS 文档，但仍然一无所获。

在 Angular 的模块配置路由文件中，URL 不以 #! 为前缀：

users.client.routes.js：

...
state('login', {
    url: '/login',
    templateUrl: 'modules/users/views/authentication/login.client.view.html'
}).
...

所以我有两个问题：

【问题讨论】：

【解决方案1】：

Angular 与所有单页应用程序框架一样，使用哈希 # 锚点来欺骗浏览器将客户端链接重定向回 JavaScript，而不是发出服务器请求。 $location service 用于管理此进程。

$location 服务解析浏览器地址栏中的 URL（基于 window.location）并使 URL 可用于您的应用程序。地址栏中 URL 的更改会反映到 $location 服务中，对 $location 的更改会反映到浏览器地址栏中。

其他框架使用 hashbang 或 #! 允许您仍然使用 # 作为实际的页面锚点。如果您的目标受众正在使用符合 HTML 5 的浏览器，并且您已在服务器上配置了其他重定向，则可以自定义角度定位服务以启用此功能，还可以自定义以允许您根本不使用 #。

Mean.js 开发团队选择启用 hashbang 格式作为他们的标准。在https://github.com/meanjs/mean/blob/master/public/application.js 你会看到$locationProvider.hashPrefix('!');

您也可以使用自己的自定义设置覆盖它（例如，$ 用于 #$ 路径），删除此行并恢复为默认的 # 而不是 #! 用于角度，或启用 HTML 5 模式。

最好仔细阅读 $location service 的文档，因为它讨论了页面刷新影响、网络爬虫、服务器配置选项、HTML 5 模式的注意事项等。

【讨论】：

【解决方案2】：

Angular 在非 HTML5 浏览器的 url 中使用 hashtag。

这可以通过以下方式解决：

angular.module('yourapp').config(function($locationProvider) {
    $locationProvider.html5Mode(true); 
}));

【讨论】：