今天让我们一起来学习一下AngularJS里的嵌套路由。
ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性，嵌套路由功能主要是依赖$stateProvider服务,$urlRouterProvider服务与 ui-view实现。.
首先我们先使用AngularJS框架来创建简单的html和JavaScript页面。
我们需要创建的文件有一下这些：
1.先创建主体页面 main.html
2.嵌套路由页面 page.html
3.在创建三个子页面 page1.html 、 page1.html 、 page1.html
注意：在使用这个方法时，记得要引入angular-ui-route.js插件哦！
main.html
创建页面如下：
<!DOCTYPE html>
<html ng-app="mk">
<head>
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-ui-route.js"></script>
<script>
var app = angular.module("mk", [‘ui.router‘]);
// 依赖$stateProvider服务与$urlRouterProvider服务
app.config(function ($stateProvider, $urlRouterProvider) {
});
</script>
</head>
<body data-ng-app="myApp">
<h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1>
<div ui-view=""></div>//必填
</body>
<html>
Page.html
创建页面如下：
<div>
<span style="padding-right: 20px" ><a href="javascript:;">Page-1</a></span>
<span style="padding-right: 20px" ><a href="javascript:;">Page-2</a></span>
<span style="padding-right: 20px" ><a href="javascript:;">Page-3</a></span>
</div>
Page1.html
创建页面如下：
<!--子页面1-->
<div>
<div>
<h1>Page 子页面1</h1>
</div>
</div>
Page2.html
创建页面如下：
<!--子页面2-->
<div>
<div>
<h1>Page 子页面2</h1>
</div>
</div>
Page3.html
创建页面如下：
<!--子页面3-->
<div>
<div>
<h1>Page 子页面3</h1>
</div>
</div>
以上还是个开始，主体页面main.html还没有嵌套page.html页面，接下来先把page.html页面嵌套在其中吧。
此时main.html
创建页面如下：（红色部分为新加内容）
<!DOCTYPE html>
<html ng-app="mk">
<head>
<title></title>
<style> body{ background: #cc9900; }</style>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-ui-route.js"></script>
<script>
var app = angular.module("mk", [‘ui.router‘]);
// 依赖$stateProvider服务与$urlRouterProvider服务
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/Page");
//这一行定义了会在main.html页面第一个显示出来的状态，作为页面被加载好以后第一个被使用的路由.
$stateProvider
.state("Page", {
url: "/Page",
templateUrl: "Page.html"
})
});
</script>
</head>
<body data-ng-app="myApp">
<h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1>
<div ui-view=""></div>
</body>
<html>
效果图：（现在的链接还未添加内容）
接下来完善一下Page.html
创建页面如下：
<div>
<span style="padding-right: 20px" ui-sref=".Page1"><a href="javascript:;">Page-1</a></span>
<span style="padding-right: 20px" ui-sref=".Page2"><a href="javascript:;">Page-2</a></span>
<span style="padding-right: 20px" ui-sref=".Page3"><a href="javascript:;">Page-3</a></span>
</div>
<div ui-view=""/></div>
最后我们把main.html修改完整，让在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候需要页面在占位标记那里显示出来。
【完整的main.html】
<!DOCTYPE html>
<html ng-app="mk">
<head>
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-ui-route.js"></script>
<script>
var app = angular.module("mk", [‘ui.router‘]);
// 依赖$stateProvider服务与$urlRouterProvider服务
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/Page");
$stateProvider
.state("Page", {
url: "/Page",
templateUrl: "Page.html"
})
// Page下的page1
.state("Page.Page1", {
url:"/Page1",
templateUrl: "Page1.html"
})
.state("Page.Page2", {
url:"/Page2",
templateUrl: "Page2.html"
})
.state("Page.Page3", {
url:"/Page3",
templateUrl: "Page3.html"
});
});
</script>
</head>
<body data-ng-app="myApp">
<h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1>
<div ui-view=""></div>
</body>
<html>
好了，AngularJS里的嵌套路由到现在就全部实现了，你们快点在自己的本上运行一下吧！
时间： 2024-10-14 08:07:11