HTML5模式和Hashbang模式
编程技术 / houtizong 发布于 3年前 84
我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。
html5Mode
一个布尔值，标识$location服务是否运行在HTML5模式下。
hashPrefix
一个字符串值（实际上是一个英文字符），被用做Hashbang风格URL的前缀（可以使用Hashbang模式，或者在传统浏览器中使用HTML5模式）。默认情况下此值为空，所以Angular生成的哈希值只是一个''而已。如果hashPrefix被设置为'!'，那么Angular就会使用Hashbang URL(url后面跟着一个!号)。
你可能会问，这些模式到底是些什么东西啊？我们来解释一下。假设你拥有一个漂亮的网站www.superawesomewebsite.com，这个网站正在使用AngularJS框架。
假如你有一个特定的路由（带有一些参数以及一个哈希值），例如/foo?bar=123#baz。
在普通的Hashbang模式下（将hashPrefix设置为'!'），或者在那种老式的不支持HTML5的浏览器中，你的URL看起来将会像下面这样：
http://www.superawesomewebsite.com/#!/foo?bar=123#baz
而在HTML5模式下，URL看起来会像下面这样：
http://www.superawesomewebsite.com/foo?bar=123#baz
在这两种情况下，调用location.path()的结果都是/foo，调用location.search()的结果都是bar=123，调用location.hash()的结果都是baz。既然如此，你为什么不直接使用HTML5呢？
Hashbang的目标是：可以在所有浏览器中无缝地使用，并且只需要进行最少量的配置即可。你只要设置一下hashBang前缀（默认设置为!），然后就立刻可以使用了。
另一方面，在HTML5模式下，需要使用HTML5的History API来和浏览器中的URL地址进行交互。$location服务足够智能，它会自动判断浏览器是否能够支持HTML5模式；如果有必要，它会回退到Hashbang模式下，所以你不必担心会产生额外的工作量。但是，你必须小心处理以下几个问题。
1.服务端配置
由于HTML5链接与应用中的所有其他URL地址看起来一模一样，所以你需要在服务端进行一些处理，把应用内部的所有超链接都路由到你的主HTML页面上（最有可能的是index.html）。例如，如果你的应用是superawesomewebsite.com的登录页，在应用中有一个/amazing?who=me路由，那么浏览器显示的URL将会是http://www.superawesomewebsite.com/amazing?who=me+。
如果你通过应用进行浏览，不会存在什么问题，因为HTML5的History API将会发起请求并处理好所有事情。但是，如果你试图直接浏览这个URL，那么你的服务端就会傻傻地瞪着你，它会觉得你疯了，因为在它那一侧，并没有指向这个URL的资源。所以，你必须保证所有到/amazing的请求都会重定向到/index.html#!/amazing。
然后AngularJS将会从那一点开始继续向前运行，从而可以正确处理所有事情。它会检测路径的变化，然后重定向到已经定义好的、正确的AngularJS路由上。
2.重写超链接
你可以简单地把URL写成以下形式：
<a href="/some?foo=bar">link</a>
实际效果与你是否正在使用HTML5模式有关，AngularJS将会根据具体情况重定向到/some?foo=bar或者index.html#!/some?foo=bar，而并不需要你来增加额外的处理步骤。
但是以下这些类型的超链接不会被重写，所以浏览器会刷新整个页面。
a.带有target元素的链接，例如：
<a href="/some/link" target="_self">link</a>
b.跳往其他不同域名的绝对链接，例如：
<a href="http://www.angularjs.org">link</a>
这种写法和前面的写法不同，因为它是一个绝对链接，而上一个例子中的链接是以当前URL为基点的。
c.从其他基础路径起始的链接，这个基础路径是已经定义好的，例如：
<a href="/some-other-base/link">link</a>
3.相对链接
请注意检查所有使用相对路径的链接、图片、脚本等。你要么必须在主HTML头部指定基础URL（<base href="/my-base">），要么必须在所有地方都使用绝对路径的URL（以/号打头），这是因为所有使用相对路径的URL都会被解析为绝对URL，解析的依据是文档初始化时候的绝对URL，一般来说这个URL与应用的根路径是不同的。
强烈建议启用History API并从文档的根路径运行Angular应用，因为这样Angular会负责处理所有相对链接的问题。
附：Hashbang（也称为Shebang）是一个由“#”号和“！”构成的字符串行（#！），它出现在文本文件第一行的前两个字符的位置。在文件中存在Shebang的情况下，类UNIX操作系统的程序载入器会分析Shebang后面的内容，将这些内容作为解释器指令，然后调用该指令，并将载有Shebang的文件路径作为该解释器的参数。
文章来源：《用AngularJS开发下一代Web应用》
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
