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

单页面应用(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类*/  
            content:".";  /*可以为空*/  
            display: block;  
            height: 0;  
            line-height: 0;  
            visibility: hidden;  
            clear:both;  /*清除浮动*/  
        }  
        .clearfix{  /*兼容ie浏览器*/  
            zoom:1;  
        }

    </style>
    <script src="./angular.min.js"></script>  <!-- 引入AngularJS框架(1.5.8) -->  
    <script src="./angular-route.min.js"></script>  <!-- 引入路由模块 -->  
</head>  
<body ng-app="App">  
    <div>
    	<ul class="clearfix">
    		<li><a href="#/index/zhangsan/12">index</a></li>  <!-- 链接都是锚点。 通过"/"传递参数 -->
    		<li><a href="#/introduce">introduce</a></li>
    		<li><a href="#/contact">contact</a></li>
    		<li><a href="#/list?name=zhangsan&age=12">List</a></li> <!-- 通过"?"传递参数 -->
    	</ul>
    	<div class='content'>
    		<div ng-view></div>  <!-- 占位符 -->
    	</div>
    </div>
    <script>
    	// 依赖ngRoute模块
        var App = angular.module('App',['ngRoute']);

        // 配置路由模块
        App.config(['$routeProvider',function($routeProvider) {
        	// AngularJS路由中的锚点一般以"#/"开头
        	$routeProvider.when('/index/:name/:id',{  //第二个"/"后的内容表示锚点中的参数(:id表示形参)
        		template: "<h3>Index Pages</h3>",  //简单内容可以直接使用template。 用模板替换占位符
        		controller: 'IndexController'  //指定视图的控制器(视图中的数据根据控制器动态生成。控制器可以接收锚点中的参数($routeParams))
        	}).when('/introduce',{
        		//template: "<h3>Introduce Pages</h3>"
        		templateUrl: './xxx.html'  //复杂的内容可以用templateUrl。(发送Ajax请求,必须有服务器才生效)
        	}).when('/contact',{
        		template: "<h3>Contact Pages</h3>"
        	}).when('/list',{
        		templateUrl: "./list.html",  //视图模板
        		controller: 'ListController'  //指定视图的控制器
        	}).otherwise({
        		redirectTo: '/index'   //其他情况跳转到"/index"
        	});

        }]);

        // 锚点中的"/"传递参数时,必须严格匹配对应路由;"?"传递参数不需要严格匹配路由(只匹配"?"前的路由)
        // 锚点中可以用"/"和"?"同时传递参数。 "#index/zhangsan/12?sex=男" (路由只匹配"?"前的内容)
        
		// 控制器 $routeParams获取锚点链接中参数的服务(通过"?"和"/"传递的参数都可以接收)
        App.controller('IndexController',['$scope','$routeParams',function($scope,$routeParams) {
        	console.log($routeParams);  // Object {name: "zhangsan", id: "12"}
        }]);

        // 控制器 $routeParams获取锚点链接中参数的服务
        App.controller('ListController',['$scope','$routeParams',function($scope,$routeParams) {
        	console.log($routeParams);  // Object {name: "zhangsan", age: "12"}
        	$scope.items = ['html','css','js'];  //模拟获取的动态数据
        }]);
   
    </script>  
</body>  
</html>

./list.html（视图模板）：

<dl>
	<dd ng-repeat="item in items">{{item}}</dd>
</dl>

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

猜你喜欢