我们可以用$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应用》
相关推荐
Hashbang URL模式是Google推荐的一种方法,用于让搜索引擎更好地理解和索引SPA的内容。这种模式下,URL看起来像 `http://example.com/#!/some/path`。这里的`!`符号表示接下来的部分是一个应用特定的“片段”,而...
总结,`angular-url` 涉及到AngularJS中的URL管理和路由,包括 `$location` 服务提供的路径和查询参数处理、URL变化监听、HTML5模式与Hashbang模式的切换,以及与 `$routeProvider` 的配合使用。理解和熟练运用这些...
Hashbang模式通过URL片段来模拟路由,而History API则通过改变浏览器的历史记录来实现平滑的页面导航。 2. WebSocket - WebSocket是一种在客户端和服务器之间建立持久连接的协议,它提供了全双工通信,允许双向...
- **Hashbang模式**:在浏览器不支持HTML5 History API的情况下,PathJS提供了一种通过`#!`符号来模拟路由变化的方法。这种方式可以在旧版IE或其他不支持新API的浏览器中工作。 - **HTML5 pushState模式**:对于...
这行代码告诉AngularJS使用HTML5 History API来处理路由,而不是传统的Hashbang模式。例如: ```javascript angular.module('yourApp', []) .config(function($routeProvider, $locationProvider) { $...
支持Hashbang、HTML5 pushstate、内部实现三种路由模式,路由模式可以通过属性设置也可以由框架自动设置,不影响应用的实现。 支持全局事件来实现钩子功能。 轻量级,即使 allinone 只有 13k(minified),5k(gzip) ...
5. **模块化和打包**:为了优化代码结构和性能,开发者会使用模块化工具(如CommonJS、ES6模块)组织代码,并利用Webpack或Rollup等打包工具将所有资源打包成一个或多个文件,以便浏览器加载。 6. **响应式设计**:...
对于不支持的浏览器,它会降级到传统的`hashbang`模式,以保持一定的可用性。 8. **社区支持和文档**:作为一个开源项目,`pushy`有活跃的社区支持和详尽的文档,帮助开发者快速上手并解决问题。你可以找到许多示例...
支持Hashbang,HTML5 pushstate,内部实现三种路由模式,该路由模式可以按属性设置或由框架自动设置,而不会影响应用程序的实现。 支持全局事件以实现挂钩函数。 轻巧,即使allinone仅为13k(最小),5k(gzip) ...
//设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置<base href= />标签 requireBase : false }); } ]); ...
兼容HTML5及hashbang模式186 链接外部页面187 组织路由定义187 将路由定义分离到多个模块188 减少路由定义的重复代码188 66总结189 第7章安全191 71提供服务端认证和授权192 处理未授权的访问192 提供...
AngularJS默认使用URL的哈希部分(即URL中的#符号后的内容)来追踪路由,这种机制被称为哈希(Hashbang)模式。哈希模式的好处在于其兼容性较好,因为过去HTML5还不被广泛支持时,带有#符号的URL在旧版浏览器中能够...
然而,这种“hashbang”模式的URL(如"#/…")对于分享链接和SEO并不友好。 AngularJS 1.6引入了HTML5 Mode,它允许我们使用正常的URL路径,而不包含“#”符号。但启用此模式时,需要服务器端配合处理这些路由,...
Sinatra 路由语法 + pushstate 和 hashbang 支持 + 普通 url ki-router.js 是受启发的具有浏览器支持的 javascript 路由器。 当用户打开页面或点击链接时,ki-router.js 会解析关联的 url 并尝试找到匹配的 url 模式...
- **$locationHashbangOptions**:配置如何处理URL的hashbang模式。 - **ngAnimate**:1.3版本增强了动画支持,提供了更多的动画钩子。 总的来说,AngularJS 1.3是一个成熟的框架,提供了丰富的特性和工具,帮助...
学习者将了解这些模式的原理和应用。 5. **数据状态管理**:在待办事项应用中,数据的增删改查需要有良好的状态管理。这可能涉及到使用JavaScript对象或数组来存储任务,或者更高级的工具如Redux或Vuex。 6. **...
25. **使用MVC设计模式**:分离模型、视图和控制器,提高代码结构清晰度。 26. **JSP内置对象**:理解page、request、session、application等对象的作用和使用。 27. **页面跳转与重定向**:何时使用`response....
1. **Hashbang模式**:通过监听`hashchange`事件来获取URL变化,如`http://example.com#!/home`。这种方式在不支持HTML5 History API的浏览器中也能工作,但URL中会有`#`符号,不够美观。 2. **HTML5 History API**...