1.index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js" type="text/javascript"></script>
<script src="angular-route.min.js" type="text/javascript"></script>
<script src="angular-ui-router.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body ng-app="myApp">
<h1>Ui-router Demo</h1>
<div ui-view=""></div>
</body>
</html>2.app.js
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/PageTab");
$stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "partials/p123.html"
})
.state("PageTab.Page1", { //子父级关系
url: "/Page1",
templateUrl: "partials/p1.html"
})
.state("PageTab.Page2", {
url: "/Page2",
templateUrl: "partials/p2.html"
})
.state("PageTab.Page3", {
url: "/Page3",
templateUrl: "partials/p3.html"
});
});
3.partials文件下的p123.html
<div>
<div>
<span style="width:100px" ui-sref="PageTab.Page1"><a href="">Page-1</a></span>
<span style="width:100px" ui-sref="PageTab.Page2"><a href="">Page-2</a></span>
<span style="width:100px" ui-sref="PageTab.Page3"><a href="">Page-3</a></span>
</div>
<div>
<div ui-view=""/>
</div>
</div>4.partials文件下的p1.html、p2.html、p3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
pppppppppppp11111111111
</body>
</html>