2.AngularJS--子路由
1.前言
在前面的一篇文章中，叙述了在AngularJS中路由的使用。其实，在路由中还可以继续嵌套路由，称之为子路由。下面讲述一下子路由的使用。
2.步骤
index02.html：程序访问的入口
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>子路由的应用title>
<script type="text/javascript" src="js/angular.min.js">script>
<script type="text/javascript" src="js/angular-ui-router.min.js">script>
<script type="text/javascript" src="app/app2.js">script>
head>
<body>
<div ui-view="main">
div>
body>
html>app2.js：在该路由配置中，会将D.html填充到index02.html的main视图下。
// 创建路由模块
var m = angular.module("app",["ui.router"]);
// 配置路由
m.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/D"); // 激发路由
$stateProvider.state("D",{
url:"/D",
views:{
"main":{
templateUrl:'templates/D.html',
}
}
})
})D.html：而在D.html中有含有视图，将会被html片段替换。
<ul>
<li ui-sref="D.d1">D1片段li>
<li ui-sref="D.d2">D2片段li>
<li ui-sref="D.d3">D3片段li>
ul>
<div ui-view="second">
div>在app2.js中继续配置子路由，需要主要的有两点：
（1）子路由的名称，如：D.d1，表示的是在D路由下的d1子路由；
（2）second@D，前面表示的是子路由中的视图名，后面表示的是在哪个路由下可见。
// 创建路由模块
var m = angular.module("app",["ui.router"]);
// 配置路由
m.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/D"); // 激发路由
$stateProvider.state("D",{
url:"/D",
views:{
"main":{
templateUrl:'templates/D.html',
}
}
}).state("D.d1",{
url:"/d1",
views:{
"second@D":{
templateUrl:'templates/d1.html',
}
}
}).state("D.d2",{
url:"/d2",
views:{
"second@D":{
templateUrl:'templates/d2.html',
}
}
}).state("D.d3",{
url:"/d3",
views:{
"second@D":{
templateUrl:'templates/d3.html',
}
}
})
})子视图中的html片段：
<span style="font-size:50px;color:red;">D1片段span>在子视图中，访问的路由也需要做对应的变化：
<li ui-sref="D.d1">D1片段li>3.运行结果
源码地址：https://gitee.com/DreamForever/front-end.git