angular-v1.0和ui-route结合做多路由嵌套

最新推荐文章于 2021-04-08 13:52:00 发布

天空影

最新推荐文章于 2021-04-08 13:52:00 发布

阅读量1k

点赞数

分类专栏：大前端-angular 文章标签： ui-route angular-v1.0 路由嵌套

本文链接：https://blog.csdn.net/jx950915/article/details/79485124

版权

大前端-angular 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

因为最近要做的项目涉及到多层嵌套，然后以前都是用angular做路由的，但是ng-route只能做一级路由，然后百度了一下，说可以用ui-route，但是看官方例子并没有感觉很清晰，还是看着比人的博客然后慢慢自己撸了一个出来。

准备工作

引入js

index.html

<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>

建几个html文件

index.html  nav1.html  nav2.html  nav1_1.html  nav1_2.html

建这几个的原因是让大家更直观清晰了解

开工

index.html

<style>
    * {
        padding: 0;
        margin: 0;
    }
    a {
        text-decoration: none;
        color: blue;
    }
    li {
        list-style: none;
    }
    div,
    ul {
        box-sizing: border-box;
    }
    .layout {
        width: 402px;
        height: 200px;
        border: 1px solid grey;
        margin: 40px auto;
    }
    .layout-head {
        width: 400px;
        border-bottom: 1px solid grey;
        height: 40px;
        line-height: 40px;
        font-size: 0;
    }
    .layout-head li {
        display: inline-block;
        width: 33.3%;
        text-align: center;
        font-size: 14px;
    }
</style>
<body data-ng-app="myapp">

    <div class="layout">
        <ul class="layout-head">
            <li>
                <a ui-sref="a" ui-sref-opts="{reload:true}">一级</a>
            </li>
            <li>
                <a ui-sref="b">二级</a>
            </li>
            <li>
                <a ui-sref="c">三级</a>
            </li>
        </ul>
        <div data-ui-view=""></div>
    </div>
</body>

route.js(路由配置js文件)


 <script>
    angular.module('myapp', ['ui.router'])
        .config(function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/a'); //一级默认
            $stateProvider.state('a', {
                    url: '/a',
                    templateUrl: 'nav1.html',
                    // 二级导航下的默认页面显示
                    controller: function ($state) {
                        $state.go('a.a')
                    }
                })
                .state('b', {
                    url: '/b',
                    templateUrl: 'nav2.html'
                })
                .state('c', {
                    url: '/c',
                    templateUrl: 'nav3.html'
                })
                .state('a.a', {
                    url: '/a.a',
                    templateUrl: 'nav1_1.html'
                })
                .state('a.b', {
                    url: '/a.b',
                    templateUrl: 'nav1_2.html'
                })
        });
</script>

nav1.html

 <style>
    .layoutLeft>li{
        padding:5px 0;
    }
    .layoutLeft{
         width:100px;
         height: 160px;
         text-align: center;
         border-right:1px solid grey;
         float: left;
     }
    .layoutRight{
        width:300px;
        height: 160px;
        float:left;
        line-height: 160px;
        text-align: center;
    }
 </style>
</head>
<body>
    <ul class="layoutLeft">
       <li><a ui-sref="a.a">一级</a></li>
       <li><a ui-sref="a.b">二级</a></li>
     </ul>
    <div class="layoutRight" ui-view></div>
</body>

nav2.html

<style>
    .layoutLeftNav>li{
        padding:5px 0;
    }
</style>
</head>
<body>
     <ul class="layoutLeftNav">
       <li>二级</li>
     </ul>
</body>

nav3.html

 <style>
    .layoutLeftNav>li{
        padding:5px 0;
    }
 </style>
</head>
<body>
     <ul class="layoutLeftNav">
       <li>三级</li>
     </ul>
</body>

nav1_1.html

<body>
    一级first>二级菜单first>内容
</body>

nav1_2.html

<body>
    一级first>二级菜单second>内容
</body>

至此一个简单的多级嵌套就完成了，具体的就是看inde.html和nav1.html中的代码

这里有一个点，那就是多级默认和再次点击默认的情况，我是已经放进去了，看代码注释你们也能看明白

一个是html文件中a标签的那个，就是为了再次点击的时候再次条用controller中的方法

u的i-sref-opts="{reload:true}"

 $urlRouterProvider.otherwise('/a'); //一级默认
       $stateProvider.state('a', {
               url: '/a',
               templateUrl: 'nav1.html',
               // 二级导航下的默认页面显示
               controller: function ($state) {
                   $state.go('a.a')
               }
           })

完整代码

天空影

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
angular-v1.0和ui-route结合做多路由嵌套

因为最近要做的项目涉及到多层嵌套，然后以前都是用angular做路由的，但是ng-route只能做一级路由，然后百度了一下，说可以用ui-route，但是看官方例子并没有感觉很清晰，还是看着比人的博客然后慢慢自己撸了一个出来。准备工作引入jsindex.html&lt;script src="https://cdn.bootcss.com/angular.js/1.6.9/...
复制链接

扫一扫

专栏目录