AngularJS 单页面应用,路由(ngRoute),锚点传参($routeParams)

最新推荐文章于 2022-04-20 16:33:47 发布

houyanhua1

最新推荐文章于 2022-04-20 16:33:47 发布

阅读量675

点赞数

分类专栏： AngularJS 文章标签： angularjs 路由 routeParams 单页面应用

本文链接：https://blog.csdn.net/houyanhua1/article/details/80158585

版权

本文介绍了AngularJS单页面应用(SPA)的优势，如无页面跳转的用户体验，通过路由和锚点展示不同视图，并强调了使用AngularJS的ngRoute模块动态加载视图和通过$routeParams传递参数的方法。文中还提醒避免直接使用锚点点击事件，而应利用hashchange事件处理页面逻辑。

摘要由CSDN通过智能技术生成

单页面应用(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类*/

最低0.47元/天解锁文章

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 单页面应用,路由(ngRoute),锚点传参($routeParams)

单页面应用(SPA)1、不产生页面跳转,提高用户体验。(链接使用锚点)2、把多个功能(视图)集成在一个页面中。根据不同的逻辑展示不同的视图(路由)(锚点)3、动态生成数据,通过Ajax异步获取。4、和Tab栏不同(SPA可以点击前进后退)5、外面包装一个壳(浏览器)模拟APP。6、AngularJS将监听锚点变化的事件(hashchange)进行封装,封装成前端路由(Route)。不能使用锚点...
复制链接

扫一扫

专栏目录