AngularJs 路由

刺骨的言语ヽ痛彻心扉 2021-07-24 20:52 480阅读 0赞

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>
    	<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:**

**传参的控制器js：**

var app=angular.module('usermod',[])
    
    app.controller('userCon',['$scope','$routeParams',function($scope,$routeParams){ 
    
    		$scope.name='jeff22';
    		$scope.age=17;
    
    		console.log($routeParams)
    }])