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:'当前页面对应要加载的脚本即控制器名称'
				}).when(...)
				.otherwise({
				//默认加载的页面代号
					redirectTo:'/页面代号即a标签#后的href内容'
				})
			}])

	注意:
		(1)如果使用路由功能,在创建页面数据模型app的时候,必须要注入一条名为ngRoute的信息,相当于对当前页面声明要使用路由声明	
			var app=angular.module('app',['ngRoute'])
		(2)在承载不同页面的容器上记得不要忘记加载ng-view,否则路由选中的页面无法加载

代码示例:

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

来源：CSDN

作者：神奇大叔

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

标签

路由