angular的ui-router小demo

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

于海航

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

阅读量439

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/xiaoyu_yhh/article/details/70915902

新手入门专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用AngularJS和UI-Router实现的多页面应用案例。通过定义不同的状态和路由，实现了基于模板URL的页面加载，并展示了如何设置默认路由及父子状态关系。此示例包含导航栏和三个可切换的内容页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>