angular路由模拟微信页面切换和页面之间的传值

最新推荐文章于 2023-02-21 09:51:28 发布

sdfujichao

最新推荐文章于 2023-02-21 09:51:28 发布

阅读量2k

点赞数

分类专栏： angularJS 文章标签： angular路由

本文链接：https://blog.csdn.net/sdfujichao/article/details/51986809

版权

angularJS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

angular模拟微信页面的切换，页面之间传值。用路由。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<title>路由的使用</title>
		<script src="day2/src/angular.js"></script>
		<script src="js/angular-route.js"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body,html{width: 100%;height: 100%;}
			
			.content{position: absolute; top: 0;left: 0;bottom: 49px; width: 100%;background: red;}
			.footer{
				display: flex;
				position: absolute;left: 0; bottom: 0; height: 49px; width: 100%;border: 1px solid black
			}
			.footer a{ text-align: center;
				text-decoration: none;	flex: 1; border: 1px solid black;}
		</style>
	</head>
	<body>
		
		<div ng-app="fristApp">
			<div class="content" ng-view></div>
			<div class="footer" ng-controller="fristController">
				<a href="#div1">微信</a>
				<a href="#div2">通讯录</a>
				<a href="#div3">发现</a>
				<a href="#div4">我</a>
			</div>
			
			
		</div>
	</body>
	<script type="text/javascript">
		
		
		var myApp = angular.module('fristApp',['ngRoute']);
		
		myApp.config(['$routeProvider',function($routeProvider,$params){
			$routeProvider
			.when('/div1',{
				
				// 使用$routeProvider配置路由，原理是当地址栏地址#之后的值跟when的值匹配，
				//如果匹配成功就调用。
//				template:"<p>p</p>"
				template:"<p>div1</p>"
			})
			.when('/div2',{
				templateUrl:"code22demo.html",
				controller:'secondController'
				
			})
			.when('/div3',{
				template:"<p>div3</p>"
			})
			.when('/div4/:name',{
				template:"<p>div4</p>"
			})
			.when('/test/:param1',{
				template:"<p>testHTML</p>",
				controller:'thridController'
				
			})
			
			// 还可以直接加载进其他的页面，分离页面
			.otherwise({
				redirectTo:'/div3'
			})
			
		}])
		
		
		
		myApp.controller('fristController',function(){
		
		})
		
		myApp.controller('secondController',function($scope,$location){
			$scope.name = '';
			$scope.clickNext = function(){
				$location.path('test/'+$scope.name);
			}
		});
		myApp.controller('thridController',function($scope,$routeParams){
			console.log($routeParams);
			console.log($routeParams.param1)
		})
	</script>
</html>