您的位置：首页 > 产品设计 > UI/UE

angular的ui-router小demo

2017-04-28 15:33 253 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular

相关文章推荐

新的分享

章节导航