Angularjs中的标签模式和html5模式

浏览$location的实例代码我们不难发现,每次的url中都会带一个#,这是因为angularjs默认使用的是标签模式,它和html5模式有什么区别?

(1)标签模式

标签模式使用的是内部链接的技巧,URL后面紧跟一个#,angularjs本身不会重写<a>标签,也不需要服务器端的支持,链接后的URL样子基本是这样的:

http://example.com/#/some/path?foo=bar&baz=xoxo

(2)HTML5模式

标签模式的url看起来总是觉得不爽,html5模式可能比较适合咱们的请求格式(比如说REST),

http://example.com/some/path?foo=bar&baz=xoxo

在angularjs内部,可以通过$locationProvider.Html5Mode()(内部用的是html5 history api,如果浏览器不支持将自动降级到标签模式)方法来实现这样的路由要求,在该模式下,angularjs会重写<a>标签。使用该模式时,永远都不要使用相对路径,如果你的应用是在根路径中加载的,这不会有什么问题,但如果是在其他路径中,AngularJS应用就无法正确处理路由了.

为了在应用程序各处使用相对链接,你将需要在你文档的<head>里面设置一个<base>.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <base href="/">
</head>

注:html5 history api

  1. history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。
  2. history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。
  3. history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样。

浏览器支持情况(完整的可以通过www.caniuse.com查询)

IE 10+, FF38+,chrome 31+,safari 7.1+, opera 30+

为什么要用history api?

  1. 无法使用浏览器的前进、后退来切换前后数据。
  2. 当我们将浏览器地址栏中的链接与朋友分享时,可能实际上却并非我们期望的内容。
  3. 单纯地使用AJAX不利于搜索引擎优化。

参考链接:http://diveintohtml5.info/history.html

http://www.clanfei.com/2012/09/1646.html

https://docs.angularjs.org/api/ng/provider/$locationProvider

https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

时间: 2024-10-01 22:43:57

Angularjs中的标签模式和html5模式的相关文章

EL表达式 JSTL的标签库 EL的函数 自定义EL函数 自定义标签 JSP的开发模式 注册登陆案例

EL表达式 JSTL的标签库 EL的函数 自定义EL函数 自定义标签 JSP的开发模式 注册登陆案例 EL表达式 1.获取域对象中的值 2.EL表达式支持运算 ${ num1 + num2 } EL获取常用的WEB对象 1.pageScope 获取page域对象的值 2.requestScope 获取request域对象的值 3.sessionScope 获取session域对象的值 4.applicationScope 获取application域对象的值 * 例子:向某个域中来存入值 req

Vue-router 中hash模式和history模式的关系

Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端

PHP中的抽象类与抽象方法/静态属性和静态方法/PHP中的单利模式(单态模式)/串行化与反串行化(序列化与反序列化)/约束类型/魔术方法小结

  前  言  OOP  学习了好久的PHP,今天来总结一下PHP中的抽象类与抽象方法/静态属性和静态方法/PHP中的单利模式(单态模式)/串行化与反串行化(序列化与反序列化). 1  PHP中的抽象类与抽象方法 1.什么是抽象方法?              没有方法体 {} 的方法,必须使用abstract 关键字修饰.这样的方,我们叫做抽象方法.                    abstract function say(); //    抽象方法 2.什么是抽象类?        

javascript中的模式解析——原型模式

理解原型模式,首先要理解prototyoe(这个单词翻译 原型)属性,<javascript高级程序设计>书中描述到——我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 我在上一篇构造函数模式所说的,我们构建了一个一个Person函数,然后通过new一个person函数来创建了person1实例,person2实例,既然每个函数都有一个prototype属性,那么我有几个问题想要弄明白: per

PDO 中支持三种错误处理模式:

PDO 支持三种错误处理模式: 静默模式,警告模式,异常模式 静默模式是默认的,需要修改的话,通过设置 PDO 对象的属性完成. $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_SILENT)? $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING)?? $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_SILENT)?

关于STM32中GPIO的8种工作模式

1 综述 I/O口是单片机中非常常用的外设,STM32的I/O口有8种状态,虽然一直在使用过程中没有遇到什么问题,但是一直都不是很清楚,因此这里做一个总结(实际上这里的概念也是和STM8等其他单片机,理解了这8中状态,也就基本上理解了大部分I/O口). 2 庐山真面目 我们在库文件中的"stm32f10x_gpio.h"中可以看到如下代码: typedef enum { GPIO_Mode_AIN = 0x0, ??GPIO_Mode_IN_FLOATING = 0x04, ??GPI

Java中BigDecimal的8种舍入模式是怎样的

Java中BigDecimal的8种舍入模式是怎样的?下面长沙欧柏泰克软件学院和大家一起来学习下吧:  java.math.BigDecimal 不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值和32位的整数标度(scale)组成. 如果为零或正数,则标度是小数点后的位数.如果为负数,则将该数的非标度值乘以10的负scale次幂. 因此,BigDecimal表示的数值是(unscaledValue × 10-scale). 与之相关的还有两个类: java.ma

高性能IO设计中的Reactor模式与Proactor模式

在高性能的IO设计中,有两个比较著名的模式Reactor和Proactor模式,其中Reactor模式用于同步I/O,而Proactor运用于异步I/O操作.在比较这两个模式之前,我们首先要搞明白几个概念.什么是阻塞和非阻塞?什么是同步和异步?同步和异步是针对应用程序和内核的交互而言的,同步指的是用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪,而异步是指用户进程触发IO操作以后便开始做自己的事情,而当IO操作已经完成的时候会得到IO完成的通知(异步的特点就是通知).而阻塞和非阻塞是针

Java中的GOF23(23中设计模式)--------- 单例模式(Singleton)

Java中的GOF23(23中设计模式)--------- 单例模式(Singleton) 在Java这这门语言里面,它的优点在于它本身的可移植性上面,而要做到可移植的话,本身就需要一个中介作为翻译工作,以达到本地和Java的统一,但是就这点而言就相当的消耗资源,所以就Java程序员需要不断的去优化自己的代码.今天所研究的单例模式就是在这样的条件下产生的, 所谓单例模式,就是只有一个实例,在堆里面只有一个.假如我们的实例,就需要一个,但是会多次用到,这样的话就会出现很尴尬的问题. 比如: Win