当前位置:首页 > 开发 > Web前端 > Html5 > 正文

HTML5模式和Hashbang模式

发表于: 2014-08-31   作者:bijian1013   来源:转载   浏览:
摘要:         我们可以用$locationProvider来配置$location服务(可以采用注入的方式,就像AngularJS中其他所有东西一样)。这里provider的两个参数很有意思,介绍如下。 html5Mode         一个布尔值,标识$location服务是否运行在HTML5模式下。 ha

        我们可以用$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应用》

HTML5模式和Hashbang模式

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
模式 前面在介绍strokeStyle和fillStyle属性的时候曾说过它们的取值可以是CSS颜色值、渐变对象或者
  最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战
定义:适配器模式将一个类的接口,转换成客户期望的另一个接口。使得原本由于接口不兼容而不能一起
Decorator模式(别名Wrapper):动态将职责附加到对象上,若要扩展功能,装饰者提供了比继承更具弹
今天介绍另一种模式 观察者模式是我们经常用的一个模式,比如在用wcf做服务的时候通知客户端做一些
本文地址:http://www.cnblogs.com/masque/p/3817310.html 转载请在明显位置标明出处 1 public class
案例:商品价格变化时,需要给注册用户发送email或短信 业务描述:Email与SMS开放发送短信的接口,
门面模式:对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面对象进行。门面模式提供
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号