单页面应用(SPA)
1、不产生页面跳转,提高用户体验。(链接使用锚点)
2、把多个功能(视图)集成在一个页面中。根据不同的逻辑展示不同的视图(路由)(锚点)
3、动态生成数据,通过Ajax异步获取。
4、和Tab栏不同(SPA可以点击前进后退)
5、外面包装一个壳(浏览器)模拟APP。
6、AngularJS将监听锚点变化的事件(hashchange)进行封装,封装成前端路由(Route)。
不能使用锚点的点击事件,因为重复点击会重复发送请求。应该用hashchange事件。
demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<style>
ul li {
float:left;
background-color: pink;
text-align: center;
list-style: none;
}
ul li a {
display: block;
height: 40px;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
.active {
background-color: yellow;
}
.clearfix:after{ /*伪元素清除浮动。父级元素引用clearfix类*/