uiRouter路由操作实例（二）

最新推荐文章于 2024-04-26 21:10:08 发布

泠泠在路上

最新推荐文章于 2024-04-26 21:10:08 发布

阅读量599

点赞数

分类专栏： angularJs 文章标签： angularjs

本文链接：https://blog.csdn.net/u012396955/article/details/73171386

版权

angularJs 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

一、uiRouter路由参数设置与$stateParams服务的使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="module">
    <!--视图容器-->
    <div ui-view></div>
</div>
<script>
   //加入ui.router路由
    var m = angular.module('module', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/home');
        //定义路由规则
        $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: 'view/home.html',
                    controller: 'ctrl'
                })
                .state('user', {
                    //接收参数
                    url: '/user/{id}',
                    //$stateParams获取值传入模板中
                    template: '<h1>用户名:{{user.name}}</h1>',
                    controller: 'ctrl'
                })
    }]);
   //注入$stateParams服务
    m.controller('ctrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
        $scope.user = [
            {id: 1, name: '张三'},
            {id: 2, name: '李四'},
        ];
        //获取id
        id = $stateParams.id
        if(id){
            for(var i=0;i<$scope.user.length;i++){
                if(id==$scope.user[i].id){
                    $scope.user =  $scope.user[i];
                }
            }
        }
    }])
</script>
</body>
</html>

home.html

<li ng-repeat="v in user">
<!--获取参数-->
    <a href="" ui-sref="user({id:v.id})">{{v.name}}</a>
</li>

二、路由定义高效的父子级嵌套路由

根据需求，可用不同的写法产生不同效果的嵌套路由。

下面是第一种方法是简单的逻辑的嵌套路由。

<div ng-app="module">
 <!--视图容器-->
    <div ui-view></div>
</div>
<script>
 //加入ui.router路由
    var m = angular.module('module', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/home');
        //定义路由规则
        $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: 'view/home.html',
                })
                .state('home.news', {
                  //第一种方式对应配置
                    url: '/news',
                    template: '<h1>新闻</h1>',
                })
                .state('game', {
                    url: '/game',
                     //第二种方式对应配置
                    parent:'home',
                    template: '<h1>游戏</h1>',
                })
                .state('login', {
                    url: '/login',
                    //第二种方式对应配置
                    parent:'home',
                    template: '<h1>登录</h1>',
                })
    }]);
</script>

home.html

<div>
    <!--第一种方式-->
    <a href="" ui-sref="home.news">新闻</a>
     <!--第二种方式-->
    <a href="" ui-sref="game">游戏</a>
    <a href="" ui-sref="login">登录</a>
    <div ui-view></div>
</div>

效果图：
这里写图片描述

这里写图片描述

下面使用第二种比较灵活的方式来进行路由的嵌套

<style>
    * { padding : 0px; margin : 0px; }

    ul, ol, li { list-style : none }

    div[ui-view=top] { background : #dcdcdc; border-bottom : solid 3px #999999; }

    div[ui-view=left] { width : 200px; border : solid 1px red; float : left; }

    div[ui-view=right] { position : absolute; left : 200px; right : 0px; border : solid 1px red; }
</style>
<div ng-app="module">
    <div ui-view="top"></div>
    <div ui-view="left"></div>
    <div ui-view="right"></div>
</div>
<script>
    var m = angular.module('module', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/my');
        //定义路由规则
        $stateProvider
                .state('my', {
                    url: '/my',
                    //加入views属性
                    views: {
                        top: {
                            templateUrl: 'view/top.html'
                        },
                        left: {
                            templateUrl: 'view/menu.html'
                        },
                        right: {
                            templateUrl: 'view/about.html'
                        }
                    }
                })
                .state('video', {
                    url: '/video',
                    views: {
                        top: {
                            templateUrl: 'view/top.html'
                        },
                        left: {
                            templateUrl: 'view/menu.html'
                        },
                        right: {
                            templateUrl: 'view/video_lists.html'
                        }
                    }
                })
    }]);
</script>

top.html

<style>
    div.top a{
        padding: 10px ;
    }
</style>
<div class="top">
    <a href="" ui-sref="my">我的</a>
    <a href="" ui-sref="video">视频</a>
</div>

menu.html

<li><a href="">我的定单</a></li>
<li><a href="">修改头像</a></li>
<li><a href="">问题反馈</a></li>

about.html

<h1>关于</h1>

video_lists.html

<h1>视频列表</h1>

三、路由多个view下的父子级视频图嵌套使用

<div ng-app="module">
  <!--2个view-->
    <div ui-view=""></div>
     <!--每个view都会显示-->
    <div ui-view="content"></div>
</div>
<script>
    var m = angular.module('module', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //默认路由
        $urlRouterProvider.otherwise('/my');
        //定义路由规则
        $stateProvider
                .state('my', {
                    url: '/my',
                    views: {
                        '@': {
                            templateUrl: 'view/my.html'
                        },
                        'content':{
                            template:'欢迎来到泠泠在路上'
                        }
                    }
                })
                .state('my.video', {
                    url: '/video',
                    views: {
                       //子级在父级之下
                        'son@my': {
                            templateUrl: 'view/video.html'
                        },
                        'content@':{
                            template:'123'
                        }
                    }
                })
    }]);
</script>

my.html

<a href="" ui-sref="my">我的</a>
<a href="" ui-sref="my.video">视频</a>
<!--子view嵌套-->
<div ui-view="son"></div>

video.html

<h1>视频</h1>

泠泠在路上

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录