Angular路由简单学习

现在非常流行单页面应用,传统都是通过ajax请求数据,前端拿到数据渲染到页面,这种无刷新的视图切换非常棒!但是致命的缺点就是刷新後无法保持原来的视图,解决此问题的一个方法是使用 hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也有人把这叫pjax技术。

现在开始介绍angular的$route!

 


 
$route











上面的例子很简单, 除了用template之外还可以用templateUrl引入html的模板文件。

Angular路由简单学习_第1张图片

 在when传入控制器的指向,实现不同的页面显示不同的数据。




 
$route











 

以事件的方式映射路由页面。




 
$route











  

项目更复杂,页面相同(首页&index),数据不同,需要对url进行传参。




 
$route











Angular路由简单学习_第2张图片

路由的事件监听。




 
$route











 

补充:angular事件的传播机制。

{{count}}
{{count}}
{{count}}

前面嵌套了三个controller,我们在中间的controller上绑定了click事件,使用$emit点击的时候,上面的controller也会触发事件。

Angular路由简单学习_第3张图片

如果是$broadcast点击就是往下传播。

Angular路由简单学习_第4张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(Angular路由简单学习)