AngularJs ui-router路由

最新推荐文章于 2021-01-12 13:37:54 发布

神奇大叔

最新推荐文章于 2021-01-12 13:37:54 发布

阅读量290

点赞数

分类专栏： Angular.js 文章标签： angularjs

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104450555

版权

Angular.js 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1、引入angular-ui-router.js文件,或引入cdn
		<script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
		
2、在angular.module中注入,['ui.router']

3、配置路由

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
				//设置默认页路由，''表示当前页为默认页
				$urlRouterProvider.otherwise('');
				
				//配置路由
				$stateProvider.state('xx',{
				//路径为空表示在当前页面
				url:'',
				template/templateUrl:'<h1>哈哈</h1>',
				controller:['$scope',function($scope){...}]或控制器名，同ngRoute一样,在js中创建
			})
			.state('xx',{...}).state('xx',{...})
	}])
	
			其中:
			(1)templateUrl传入的模板中,除了定义html内容外,还可定义css
					<style>
						...
					</style>
					html内容
					
5、路线显示位置
	在容器标签上添加,ui-view,路由页面将在其中显示
		如:<div ui-view>页面不存在</div>
		
			其中:文本内容将在路由跳转错误时显示
6、路由跳转

	两种方式:
	<a href=''#/路径></a>
	<a ui-sref='state第一个参数定义的名称'>

代码示例:
主页面:

<html ng-app="app" ng-controller="main">
<head>
	<meta charset="utf-8">
	<title ></title>
	
	<script src="js/libs/angular.js"></script>
	<script src="js/libs/angular.route.min.js"></script>
	<script src='./angular/user.js'></script>
	<script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
 <style>
	.a{
		color:red;
	}
 </style>
	
</head>

<body>
<div ng-controller='d1'>
	<a href="#">首页</a>
	<a href="#/home">home</a>
	<a href="" ui-sref='movie'>movie</a>
	<!-- 当访问路由出错,会显示内容 -->
	<div ui-view>页面不存在</div>
</div>



<script>
var app=angular.module('app',['ui.router']);

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

		//将'/hd'设置为默认页,打开页面自动跳转
		$urlRouterProvider.otherwise('');

		//创建路由
		$stateProvider.state('default',{
			//路径为空表示在当前页面
			url:'',
			template:'<h1>哈哈</h1>'
		})
		.state('home',{
			url:'/home',
			template:'<h1>home{{name}}</h1>',
			//控制器
			controller:['$scope',function($scope){
				$scope.name='jeff'
			}]
		})
		.state('movie',{
			url:'/movie',
			templateUrl:'./angular/user.html',
			controller:'movieCon'

		})

}])


app.controller('main',['$scope',function($scope){

}])

app.controller('d1',['$scope',function($scope){

}])

app.controller('movieCon',['$scope',function($scope){
	$scope.age=17;
}])







</script>

</body>
</html>

模板文件:

<style>
	div{
		background-color: green;
	}
	
</style>

<div>
	<h2>用户中心</h2>
	<ul>
		<li>用户名:{{name}}</li>
		<li>年龄:{{age}}</li>
	</ul>

</div>