AngularJs 路由

最新推荐文章于 2024-04-26 21:10:08 发布

神奇大叔

最新推荐文章于 2024-04-26 21:10:08 发布

阅读量541

点赞数

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

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

版权

Angular.js 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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(){...})

代码示例:

<!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>

showname.html:

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

showinfo.html:

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

代码示例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>

控制器js：

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

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

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

}])

模板html:

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

</div>

传参的控制器js：

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

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

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

		console.log($routeParams)
}])

神奇大叔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJs 路由

router路由 router路由是angularJs用于构建单页面应用的模块本质是从a标签点击跳转功能延展而来的 (1)router功能的实现需要引入,angular.route.min.js (2)router功能的实现需要以来ng-view指令 1、提供标注,显示不同页面容器的作用 (3)router功能的实现需要a标签的href属性 1、href='#要加载的页面代号...
复制链接

扫一扫