devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AngularJs 路由

作者：知新_RL | 2024-02-23 04:27:07

赞

踩

angularjs 路由
router路由
	router路由是angularJs用于构建单页面应用的模块
	本质是从a标签点击跳转功能延展而来的
	
	**功能:主要实现一个页面的模块点击加载不同应用，如微信的底部导航栏上的页面,根据
	低部的点击,加载不同功能页面;如果qq,根据下面的导航,点击后上面的模块加载不同功能**

	(1)router功能的实现需要引入,angular.route.min.js
	(2)router功能的实现需要以来ng-view指令
		1、提供标注,放在哪哪个标签就作为容器,盛放不同页面的内容
	(3)router功能的实现需要a标签的href属性
		1、href='#/要加载的路由路径'
		2、使得a标签点击时,通知路由加载哪一个页面
	(4)具体语法通过app页面数据模型创建的
		1、通过config方法构建一个路由
		2、在路由中,通过.when()来准备加载要加载的页面
		3、在路由种,通过.otherwise()来决定加载哪一个页面
			
			app模型.config(['$routeProvider',function($routeProvider){
				$routeProvider
				//页面准备加载
				.when('/页面代号即a标签的href#后的内容',{
					templateUrl:'要加载页面的url地址(以路由所在的位置为起点)',
					controller:'当前页面对应要加载的脚本即控制器名称'
					//若需要延迟加载
					resolve:{
							delay:function($q){
								//$q表示promise对象
								var delay=$q.defer();
								//用定时器模拟网络请求延迟，实际放置ajax请求
								setTimeout(function(){
									delay.resolve() //执行
								},3000);
								//return出去才能让系统知道什么时候完事
								return delay.promise
							}
						}
				}).when(...)
				.otherwise({
				//默认加载的页面代号
					redirectTo:'/页面代号即a标签#后的href内容'
				})
			}])

	注意:
		(1)如果使用路由功能,在创建页面数据模型app的时候,必须要注入一条名为ngRoute的信息,相当于对当前页面声明要使用路由声明	
			var app=angular.module('app',['ngRoute'])
		(2)在承载不同页面的容器上记得不要忘记加载ng-view,否则路由选中的页面无法加载
		(3)模板的三种写法
			template:'xx'
			templateUrl:'html文件路径'
			templateUrl:'script标签的id值'
				(1)在body里声明<script type='text/ng-template' id='xx'>
										html模板内容
							  </script>
		(4)templateUrl传入的模板中,除了定义html内容外,还可定义css
			<style>
				...
			</style>
			html内容
	
	(5)路由传参
		在路由路径后添加"?键值对"
		在路由对应的controller中
			(1)注入$routeParams
			(2)$routeParams.键名调用传入参数
			
	(5)路由事件
		(1)在范围包含所有路由的控制器中使用
		//在切换路由前执行
			$scope.$on('$routeChangeStart',function(){...})
		//在切换路由后执行
			$scope.$on('$routeChangeSuccess',function(){...})
		//路由切换失败执行
			$scope.$on('$routeChangeError',function(){...})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75

代码示例:

<!DOCTYPE html>
<html ng-app='app' ng-controller='mainController'>
<head lang="en">
	<meta charset='utf-8'/>
	<title ng-bind='mainTitle'></title>
</head>
<body>

<!-- <ul ng-controller='showNameController'>
	<li ng-repeat='pname in pnames track by $index'>{{pname}}</li>
</ul> -->

<!-- <div ng-controller='showInfoController'>
	<div ng-repeat='info in infos track by $index'>
		<h2>{{info.username}}</h2>
		<p>{{info.password}}</p>
	</div>
</div> -->

<ul>
	<li><a href="#showname">姓名列表显示</a></li>
	<li><a href="#showinfo">信息列表显示</a></li>
</ul>
<div style="width:300px; height:300px; border:1px solid black;" ng-view></div>

<script src="js/angular.js"></script>
<script src="js/angular.route.min.js"></script>
<script>

	//路由文件
	var app = angular.module('app', ['ngRoute']);
	app.config(['$routeProvider', function ($routeProvider){
		$routeProvider
			.when('/showname', {
				//因为表示要加载的内容,所以只需要写需要加载的标签内容,不需要写html结构
				templateUrl:'showname.html',
				controller:'showNameController'
			})
			.when('/showinfo', {
				templateUrl: 'showinfo.html',
				controller:'showInfoController'
			})
			.otherwise({
				//会默认加载到ng-view中
				redirectTo:'/showname'
			});
	}]);



	app.controller('mainController', ['$scope', function ($scope){
		$scope.mainTitle = 'lesson1_路由router';
	}]);
	app.controller('showNameController', ['$scope', function ($scope){
		$scope.pnames = ['frank','lily','lucy'];
	}]);
	app.controller('showInfoController', ['$scope', function ($scope){
		$scope.infos = [
			{ username:'frank', password:'123456' },
			{ username:'zoe', password:'654321' }
		];
	}]);
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

showname.html:

<li ng-repeat='pname in pnames track by $index'>{{pname}}</li>

  • 1

showinfo.html:

<div ng-repeat='info in infos track by $index'>
			<h2>{{info.username}}</h2>
			<p>{{info.password}}</p>
</div>

  • 1
  • 2
  • 3
  • 4

代码示例2:
主html页面:

<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='./angular/article.js'></script>
	<script src='./angular/config.js'></script>
 <style>
	.a{
		color:red;
	}
 </style>
	
</head>
<body ng-controller='con'>

	<span ng-show='loading'>正在加载</span>
	<a href="#/user?name=jeff">用户1</a>
	<a href="#/user?name=tom">用户2</a>
	<a href="#/user?name=hack">用户3</a>
	<a href="#/article">文章</a>
	<a href="#/config">配置</a>

<ng-view></ng-view>	

<script type='text/ng-template' id='config.html'>
	<div>
		<h2>配置中心</h2>
		<ul>
			<li>用户名:{{name}}1</li>
			<li>年龄:{{age}}</li>
		</ul>

	</div>
</script>


<script>
//因为用app这个模块配置含有其他模块的内容,所以其他模块需要注入
var app=angular.module('app',['ngRoute','usermod','articlemod','configmod']);

app.config(['$routeProvider',function($routeProvider){
		$routeProvider
		.when('/user',{
			templateUrl:'./angular/user.html',
			controller:'userCon',
			resolve:{
				delay:function($q){
					//$q表示promise对象
					var delay=$q.defer();
					//用定时器模拟网络请求延迟，实际放置ajax请求
					setTimeout(function(){
						delay.resolve() //执行
					},3000);
					//return出去才能让系统知道什么时候完事
					return delay.promise
				}
			}

		})
		.when('/article',{
			templateUrl:'./angular/article.html',
			controller:'artCon'

		})
		.when("/config",{
			templateUrl:'config.html',
			controller:'figCon'
		})

}])

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

}])

app.controller('con',['$scope',function($scope){
		$scope.loading=false;
	//在切换路由前执行
		$scope.$on('$routeChangeStart',function(){
				alert('开始');
				$scope.loading=true;
		})
	//在切换路由后执行
		$scope.$on('$routeChangeSuccess',function(){
				alert('成功切换');
				$scope.loading=false;
		})
	//路由切换失败执行
		$scope.$on('$routeChangeError',function(){
				alert('切换失败');
		})
}])




</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104

控制器js：

var app=angular.module('articlemod',[])

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

		$scope.name='jack';
		$scope.age=16;

}])

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

模板html:

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

</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

传参的控制器js：

var app=angular.module('usermod',[])

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

		$scope.name='jeff22';
		$scope.age=17;

		console.log($routeParams)
}])

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/133642
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号