ngRoute+ngAnimate与JQM中的页面跳转的区别

本文对比了AngularJS中的ngRoute与jQuery Mobile (jQM) 中的页面跳转方式,包括它们的相似之处及关键差异。还讨论了在jQM中整合AngularJS时可能遇到的问题。

1.ngRoute+ngAnimate与jQM中的页面跳转有何异同?

  相同点:

      (1)完整的HTML只需要一个

(2)使用异步AJAX请求获取下一个页面

(3)可以实现转场动画

  不同点:     

(1)ngRoute需要配置路由字典;jQM没有,更加灵活

(2)ngRoute访问路由地址的格式——特殊格式的hash

http://xxx/index.html#/main

       jQM访问页面地址——普通的URL

http://xxx/tpl/main.html

(3)ngRoute访问的路由页面可以使用F5刷新;jQM跳转的页面不能按F5刷新

(4)ngRoute-index.html只能声明一个ngView容器;jQM中index.html中可以声明多个page

(5)ngRoute:模板页面中的所有内容都会被挂到ngView;jQM模板页面中只有第一个page会被挂载到当前DOM树。

(6)ngRoute通过路由参数在两个页面间传递数据

http://.../index.html#/detail/101

  jQM中通过请求字符串H5提供的本地存储在两个页面间传递数据

http://.../tpl/detail.html?dno=102

 

 

协议名://主机名:端口/资源路径;查询参数?请求字符串#哈希地址

window.location.protocol

window.location.hostname

window.location.port

window.location.path

window.location.query

window.location.hash

 

 

 

2.jQM整合AngularJS最大的问题:

  (1)如何处理新挂载DOM节点(即新Page)——重新编译新Page节点

  (2)如何在两个页面间传递数据

 

 

 

  location.href: http://127.0.0.1/detail.html?did=2&pno=3&uname=tom&loc=bj

  location.search:  ?did=2&pno=3&uname=tom&loc=bj

  result:   { did:'2',  pno:'3',  uname: 'tom',  loc: 'bj'}

 

 

 

 

module:controller、directive、filter、service

 

3.AngularJS模块中可以出现的组件——Service

  Service组件: 是Angular中的一个函数/对象,可以在多个Controller调用;但又不需要在View中进行绑定。如需要一个解析URL不同部分的函数,可以在多个Controller中使用。

 

 

 

jQM页面切换时产生的事件的发生顺序:

pageboforeload -> pageload -> pagebeforecreate -> pagecreate

-> pageinit -> pagebeforeshow ->pageshow -> pagechange

从pagebeforeshow开始,location.href可以读取第二个页面的URL

 

转载于:https://www.cnblogs.com/baiyanfeng/p/5055641.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值