angular的ui-router小demo

最新推荐文章于 2018-08-07 11:35:15 发布

于海航

最新推荐文章于 2018-08-07 11:35:15 发布

阅读量383

点赞数

分类专栏：新手入门文章标签： angular

本文链接：https://blog.csdn.net/xiaoyu_yhh/article/details/70915902

版权

新手入门专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>

于海航

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular的ui-router小demo

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.mi
复制链接

扫一扫

专栏目录