37、AngularJs之ui.router路由基本配置及传参方法

阅读() @2018-10-29 18:16:10

使用AngularJs可以方便的做出单页面应用,既然是应用,那就涉及到页面跳转的问题,使用Angularjs的路由插件可以方便的使用路由功能,而且可以传参非常容易。

代码如下:

路由插件:angular-ui-router.js。

文件:index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路由测试</title>
	<style type="text/css">
		td{height:30px;line-height:30px;border:1px solid #ccc;text-align:center;padding:0 10px;}
	</style>
</head>
<body ng-app="app">
	<div class="nav">
		<a ui-sref="home">首页</a>
		<a ui-sref="list">列表页</a>
		<a ui-sref="article">文章页</a>
	</div>
	<div ng-controller="ctr">
		<a href="javascript:;" ng-click="fn('hello', 'world');">点我</a>
	</div>
	<div ui-view></div>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript" src="http://www.zymseo.com/js/angular-ui-router.js"></script>
<script type="text/javascript">
	var m = angular.module('app', ['ui.router']);
	m.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
		//默认路由,没有匹配的路由时,跳转到这个地址
		$urlRouterProvider.otherwise('/home');
		//自定义路由,点击某个链接跳转的链接
		$stateProvider.state('home', {
			url : '/home',
			templateUrl : function(){
				return './home.html';
			}
		})
		.state('list', {
			url : '/list',
			templateUrl : function(){
				return  './list.html';
			},
			controller : 'ctr'
		})
		.state('article', {
			url : '/article',
			params : {a:'', b:''},
			templateUrl : function($routerParams){
				return  './article.html?a='+$routerParams.a+'&b='+$routerParams.b;
			},
			controller : 'ctr'
		})
		.state('webcontent', {
			url : '/webcontent/{id}',//ui-sref中的接受参数
			templateUrl : function(){
				return './web_content.html';
			},
			controller : 'ctr'
		})
	}]);
	//控制器中使用到了$scope、$http、$stateParams、$state等服务
	m.controller('ctr', ['$scope', '$http', '$stateParams', '$state', function($scope, $http, $stateParams, $state){
		//使用$scope服务从服务端获取数据
		var obj = $http({
			url : './test.php',
			method : 'post'
		}).then(function(result){
			$scope.webList = result.data;
			return $scope.webList;
		});
		//解析obj对象
		obj.then(function(result){
			for(var i=0; i<result.length; i++){
				if($stateParams.id==result[i].webid){
					$scope.webname = result[i].webname;
					break;
				}
			}
		});
		//自定义网址跳转方法,并传参
		$scope.fn = function(a, b){
			$state.go('article', {a:a, b:b});
		}
		
		//通过$stateParams服务获取网址中的参数
		if($stateParams.a){
			$scope.a = $stateParams.a;
		}
		if($stateParams.b){
			$scope.b = $stateParams.b;
		}
	}]);
</script>

文件:home.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h1>这里是首页</h1>
</body>
</html>

文件:list.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<table cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<td>ID</td>
				<td>网站名称</td>
				<td>网站地址</td>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="(k, v) in webList">
				<td>{{v.webid}}</td>
				<td><a ui-sref="webcontent({id:v.webid})">{{v.webname}}</a></td><!--ui-sref传参-->
				<td>{{v.weburl}}</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

文件:article.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h1>这里是文章页</h1>
	{{a}}
	{{b}}
</body>
</html>

文件:web_content.html

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h1>这里是:{{webname}}</h1>
</body>
</html>

文件:test.php

<?php

header('Content-type:text/html;charset="utf8"');

$arry = array(
	array('webid'=>'1', 'webname'=>'赵一鸣个人技术博客', 'weburl'=>'http://www.zymseo.com'),
	array('webid'=>'2', 'webname'=>'太原雅辉装修网', 'weburl'=>'http://www.0351zhuangxiu.com')
);

echo json_encode($arry);

以上几个文件放置到同一目录下即可!

微信二维码