`

HTML5模式和Hashbang模式

阅读更多

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

分享到:
评论

相关推荐

    seo_sample_hashbang:示例应用程序展示了如何使用 hashbang url 启用单个应用程序 SEO

    Hashbang URL模式是Google推荐的一种方法,用于让搜索引擎更好地理解和索引SPA的内容。这种模式下,URL看起来像 `http://example.com/#!/some/path`。这里的`!`符号表示接下来的部分是一个应用特定的“片段”,而...

    angular-url:在 AngularJS 中使用 Url 的基本类

    总结,`angular-url` 涉及到AngularJS中的URL管理和路由,包括 `$location` 服务提供的路径和查询参数处理、URL变化监听、HTML5模式与Hashbang模式的切换,以及与 `$routeProvider` 的配合使用。理解和熟练运用这些...

    前端技术栈,程序员面试宝典

    Hashbang模式通过URL片段来模拟路由,而History API则通过改变浏览器的历史记录来实现平滑的页面导航。 2. WebSocket - WebSocket是一种在客户端和服务器之间建立持久连接的协议,它提供了全双工通信,允许双向...

    前端项目-path.js.zip

    - **Hashbang模式**:在浏览器不支持HTML5 History API的情况下,PathJS提供了一种通过`#!`符号来模拟路由变化的方法。这种方式可以在旧版IE或其他不支持新API的浏览器中工作。 - **HTML5 pushState模式**:对于...

    移除AngularJS下URL中的#字符的方法

    这行代码告诉AngularJS使用HTML5 History API来处理路由,而不是传统的Hashbang模式。例如: ```javascript angular.module('yourApp', []) .config(function($routeProvider, $locationProvider) { $...

    skylark-appify-routers:精心设计的 HTML5 路由框架

    支持Hashbang、HTML5 pushstate、内部实现三种路由模式,路由模式可以通过属性设置也可以由框架自动设置,不影响应用的实现。 支持全局事件来实现钩子功能。 轻量级,即使 allinone 只有 13k(minified),5k(gzip) ...

    练习-单页开发.rar

    5. **模块化和打包**:为了优化代码结构和性能,开发者会使用模块化工具(如CommonJS、ES6模块)组织代码,并利用Webpack或Rollup等打包工具将所有资源打包成一个或多个文件,以便浏览器加载。 6. **响应式设计**:...

    pushy:Clojurescript库,用于快速简便HTML5 pushState

    对于不支持的浏览器,它会降级到传统的`hashbang`模式,以保持一定的可用性。 8. **社区支持和文档**:作为一个开源项目,`pushy`有活跃的社区支持和详尽的文档,帮助开发者快速上手并解决问题。你可以找到许多示例...

    skylark-ajaxify-routers:精心制作HTML5路由框架

    支持Hashbang,HTML5 pushstate,内部实现三种路由模式,该路由模式可以按属性设置或由框架自动设置,而不会影响应用程序的实现。 支持全局事件以实现挂钩函数。 轻巧,即使allinone仅为13k(最小),5k(gzip) ...

    AngularJS的$location使用方法详解

    //设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置&lt;base href= /&gt;标签 requireBase : false }); } ]); ...

    精通AngularJS part1

    兼容HTML5及hashbang模式186 链接外部页面187 组织路由定义187 将路由定义分离到多个模块188 减少路由定义的重复代码188 66总结189 第7章安全191 71提供服务端认证和授权192 处理未授权的访问192 提供...

    AngularJS路由删除#符号解决的办法

    AngularJS默认使用URL的哈希部分(即URL中的#符号后的内容)来追踪路由,这种机制被称为哈希(Hashbang)模式。哈希模式的好处在于其兼容性较好,因为过去HTML5还不被广泛支持时,带有#符号的URL在旧版浏览器中能够...

    详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

    然而,这种“hashbang”模式的URL(如"#/…")对于分享链接和SEO并不友好。 AngularJS 1.6引入了HTML5 Mode,它允许我们使用正常的URL路径,而不包含“#”符号。但启用此模式时,需要服务器端配合处理这些路由,...

    ki-router.js:结合了 Sinatra url 语法、pushStatehashbang 支持和纯 html url 的 Javascript url 路由器

    Sinatra 路由语法 + pushstate 和 hashbang 支持 + 普通 url ki-router.js 是受启发的具有浏览器支持的 javascript 路由器。 当用户打开页面或点击链接时,ki-router.js 会解析关联的 url 并尝试找到匹配的 url 模式...

    angular.js-master.zip

    - **$locationHashbangOptions**:配置如何处理URL的hashbang模式。 - **ngAnimate**:1.3版本增强了动画支持,提供了更多的动画钩子。 总的来说,AngularJS 1.3是一个成熟的框架,提供了丰富的特性和工具,帮助...

    todoMVC:观看和编码的基本待办事项应用课程

    学习者将了解这些模式的原理和应用。 5. **数据状态管理**:在待办事项应用中,数据的增删改查需要有良好的状态管理。这可能涉及到使用JavaScript对象或数组来存储任务,或者更高级的工具如Redux或Vuex。 6. **...

    jsp网页设计40种常见的网页技巧

    25. **使用MVC设计模式**:分离模型、视图和控制器,提高代码结构清晰度。 26. **JSP内置对象**:理解page、request、session、application等对象的作用和使用。 27. **页面跳转与重定向**:何时使用`response....

    VRoute:前端路由实现

    1. **Hashbang模式**:通过监听`hashchange`事件来获取URL变化,如`http://example.com#!/home`。这种方式在不支持HTML5 History API的浏览器中也能工作,但URL中会有`#`符号,不够美观。 2. **HTML5 History API**...

Global site tag (gtag.js) - Google Analytics