详解 anjularjs的ui-route(多视图、视图嵌套、视图传参)

  最近整理了一下anjularjs的第三方插件ui-route,在这就以一个demo的形式讲解一下。整片博客均以开头的demo代码为例。下边是个目录,大家可以酌情直接跳转浏览。

 

  1. demo的代码

  2. demo效果图

  3. ui-route是啥?有啥优势?

  4. ui-route基础用法

  5. 如何实现多个视图分别加载页面

  6. 如何实现多个视图嵌套,视图中套视图

  7. ui-route如何实现页面传参

 

 

1. demo的代码

  先看一下demo的目录结构

    

  这里说明一下,主页面是 index;

    index里面有 家电、美食、厨具3个页;

      家电页面内有 电脑、手机、电视 3个子页面;

        手机页面内有 华为、苹果、三星、vivo 4个页面

      notice,提示页。和家电页面同级别

 

  再看一下具体的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ui-route简易demo</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                text-decoration: none;
            }
            #ui-route{
                margin: 50px auto;
                overflow: hidden;
                width: 616.6px;
            }
            ul li{
                list-style: none;
                width: 60px;
                height: 50px;
                margin: 50px 20px 10px 20px;
                cursor: pointer;
            }
            ul,.indexView,.view1,.view2{
                float: left;
                overflow: hidden;
            }
            .indexView{
                height: 350px;
                width: 400px;
                border: 1px solid black;
            }
            .view1,.view2{
                width: 80px;
                height: 175px;
                border: 1px solid #66AFE9;
                font-size: 18px;
                color: fuchsia;
                font-weight: bold;
            }
            .view1{
                text-align: center;
                word-break: break-all;
            }
            .view2{
                text-align: center;
                line-height: 177px;
            }
            .jiadian{
                width: 400px;
                list-style: none;
                display: flex;
                text-align: center;
                justify-content: space-around;
            }
            .jdView{
                width: 300px;
                height: 200px;
                border: 1px solid salmon;
                margin: 110px auto;
            }
            .phone li{
                list-style: none;
                width: 40px;
                height: 30px;
                margin: 15px;
            }
            .phoneView{
                width: 200px;
                height: 200px;
                border: 1px solid aqua;
                margin-left: 80px;
            }
            .phoneView p{
                margin: 10px 5px 15px 5px;
            }
            .noticeView{
                width: 80px;
                height: 90px;
                border-top: 1px solid royalblue;
                border-bottom: 1px solid royalblue;
            }
        </style>
    </head>
    <body ng-app="myApp" ng-controller="myControll">
        <div id="ui-route">
            <ul>
                <li ui-sref="jia_dian">家电</li>
                <li ui-sref="mei_shi">美食</li>
                <li ui-sref="chu_ju({word:'这是向家电页面传递的参数word'})">厨具</li>
            </ul>
            <div class="indexView" ui-view="indexView"></div>
            <div class="view1" ui-view="view1"></div>
            <div class="view2" ui-view="view2"></div>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
    <script type="text/javascript" src="js/angular.min.js" ></script>
    <script type="text/javascript" src="js/angular-ui-router.js" ></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp", ["ui.router"]);
        myApp.config(function($stateProvider, $urlRouterProvider){
            $urlRouterProvider.when('indexView', "jia_dian");
            $stateProvider
        //这个是多层视图嵌套的,一共嵌套了3层
        //这个还是多视图同时呈现,indexView、 view1、view2 同时呈现
                .state("jia_dian",{
        //url 第一次加载页面时,有URL可以自动显示默认的页面,没有只会在点击按钮之后才能加载视图
        //而且刷新页面时,如果没有写URL,页面不会保存,加了,简单刷新并不会使页面消失
                    url:"/jia_dian",
                    views:{
                        "indexView":{
                            templateUrl:'page/jia_dian.html',
                            controller: "myControll"
                        },
                        "view1":{
                            templateUrl:'page/notice.html',
                            controller: "myControll"
                        },
                        "view2":{
                            templateUrl:'page/buy.html'
                        }
                    }
                })
                
                .state("mei_shi",{
                    url:"/mei_shi",
                    views:{
                        "indexView":{
                            templateUrl:'page/mei_shi.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("chu_ju",{
                    url:"/chu_ju",
                    views:{
                        "indexView":{
                            templateUrl:'page/chu_ju.html'
                        }
                    }
                })
                
        //家电内部,电脑、手机等详情
        //注意,视图的嵌套,路由状态必须是嵌套的形式,jia_dian.jd_computer。
        //如果,路由状态只是jd_computer,这里新加载的视图会默认加载到父视图indexView中
        //切记,多层嵌套一定要把每次视图状态名一个个点链接下去,否则会出问题
                .state("jia_dian.jd_computer",{
                    //这里也可以传参数
                    url:"/jd_computer",
                    views:{
                        "jdView":{
                            controller: function($scope,$stateParams){
                                $scope.myWord = $stateParams.word;
                                console.log($stateParams);
                                console.log($stateParams.word);
                            },
                            templateUrl:'page/jia_dian/jd_computer.html'
                        }
                    }
                })
                .state("jia_dian.jd_phone",{
                    url:"/jd_phone",
                    views:{
                        "jdView":{
                            templateUrl: 'page/jia_dian/jd_phone.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("jia_dian.jd_TV",{
                    url:"/jd_TV/?aa",
                    views:{
                        "jdView":{
                            controller: function($scope,$stateParams){
                                console.log($stateParams);
                                console.log($stateParams.word);
                            },
                            templateUrl: 'page/jia_dian/jd_TV.html'
                        }
                    }
                })
                
        //家电——手机 中的各种手机介绍路由
                .state("jia_dian.jd_phone.hw",{
                    url:"/jd_phone_hw",
                    views:{
                        "phoneView":{
                            templateUrl: 'page/jia_dian/jd_phone_hw.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("jia_dian.jd_phone.pg",{
                    url:"/jd_phone_pg",
                    views:{
                        "phoneView":{
                            templateUrl: 'page/jia_dian/jd_phone_pg.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("jia_dian.jd_phone.sx",{
                    url:"/jd_phone_sx",
                    views:{
                        "phoneView":{
                            templateUrl: 'page/jia_dian/jd_phone_sx.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("jia_dian.jd_phone.vivo",{
                    url:"/jd_phone_vivo",
                    views:{
                        "phoneView":{
                            templateUrl: 'page/jia_dian/jd_phone_vivo.html',
                            controller: "myControll"
                        }
                    }
                })
                
        //右上角notice模块路由各状态
                .state("jia_dian.notice_in1",{
                    url:"/notice_in1",
                    views:{
                        "noticeView":{
                            templateUrl: 'page/notice/notice_in1.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("jia_dian.notice_in2",{
                    url:"/notice_in2",
                    views:{
                        "noticeView":{
                            templateUrl: 'page/notice/notice_in2.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("jia_dian.notice_in3",{
                    url:"/notice_in3",
                    views:{
                        "noticeView":{
                            templateUrl: 'page/notice/notice_in3.html',
                            controller: "myControll"
                        }
                    }
                })
                $urlRouterProvider.otherwise('/jia_dian');
        })
        .controller("myControll",function($scope,$state,$stateParams){
            $scope.num = 0;
            //手机页需要的数据
            $scope.data = [
                {
                    name:"华为 P11",
                    price:"3799 RMB",
                    color:"纯洁白",
                    remark:"华为旗舰版,徕卡双摄,体验极度的流畅,你值得拥有!!!"
                    
                },
                {
                    name:"iPhone8s",
                    price:"6034 RMB",
                    color:"冷傲黑",
                    remark:"苹果旗舰机,你没有看错,6千多大洋,就是我,我贵,我任性!!!"
                },
                {
                    name:"三星 Glary12",
                    price:"4799 RMB",
                    color:"冷银白",
                    remark:"看什么看,小心我炸你啊"
                },
                {
                    name:"vivo R13",
                    price:"3099 RMB",
                    color:"高贵金",
                    remark:"高贵如我,性能还好,胜在价低,要不要试试?"
                }
            ];
            $scope.goPhone=function(){
                $state.go("jia_dian.jd_phone",{})
            };
            //通过视图的形式,点击切换视图
            $scope.huan=function(){
                switch ($scope.num){
                    case 0:
                        $state.go("jia_dian.notice_in1",{});
                        break;
                    case 1:
                        $state.go("jia_dian.notice_in2",{});
                        break;
                    case 2:
                        $state.go("jia_dian.notice_in3",{});
                        break;
                    default:
                        $scope.num = 0;
                        $state.go("jia_dian.notice_in1",{});
                        break;
                }
                $scope.num++;
            };
            
            //不推荐 anjularjs 中写 jQuery ,但是我这就偷懒了
            $("li").on("click",function(){
                $("li").css({"color":"black","font-weight":"normal"});
                $(this).css({"color":"red","font-weight":"600","font-size":"18px"});
            })
        })
    </script>
</html>
家电页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul class="jiadian">
            <li ui-sref="jia_dian.jd_computer">电脑</a></li>
            <li ng-click="goPhone()">手机</li>
            <li ui-sref="jia_dian.jd_TV">电视</li>
        </ul>
        <div class="jdView" ui-view="jdView"></div>
    </body>
</html>


美食页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        美食
    </body>
</html>


厨具页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        厨具
    </body>
</html>


notice页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <br />
        <div class="noticeView" ui-view="noticeView"></div>
        <br />
        <button ng-click="huan()">下一条</button>
    </body>
</html>


buy页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button>加入购物车</button>
    </body>
</html>


电脑页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        电脑
    </body>
</html>


手机页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul class="phone">
            <li ui-sref="jia_dian.jd_phone.hw">华为</li>
            <li ui-sref="jia_dian.jd_phone.pg">苹果</li>
            <li ui-sref="jia_dian.jd_phone.sx">三星</li>
            <li ui-sref="jia_dian.jd_phone.vivo">vivo</li>
        </ul>
        <div class="phoneView" ui-view="phoneView"></div>
    </body>
</html>


电视页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        电视
    </body>
</html>


华为页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>产品: {{data[0].name}}</p>
        <p>价格: {{data[0].price}}</p>
        <p>颜色: {{data[0].color}}</p>
        <p>描述: {{data[0].remark}}</p>
    </body>
</html>


苹果页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>产品: {{data[1].name}}</p>
        <p>价格: {{data[1].price}}</p>
        <p>颜色: {{data[1].color}}</p>
        <p>描述: {{data[1].remark}}</p>
    </body>
</html>


三星页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>产品: {{data[2].name}}</p>
        <p>价格: {{data[2].price}}</p>
        <p>颜色: {{data[2].color}}</p>
        <p>描述: {{data[2].remark}}</p>
    </body>
</html>


vivo页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>产品: {{data[3].name}}</p>
        <p>价格: {{data[3].price}}</p>
        <p>颜色: {{data[3].color}}</p>
        <p>描述: {{data[3].remark}}</p>
    </body>
</html>


notice1页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        惊天大甩卖!!!
    </body>
</html>


notice2页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        买一送三啦!!!
    </body>
</html>


notice3页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        你还在等什么!!!
    </body>
</html>

  

  以上是整个demo的所有代码,如果有朋友觉得在这复制太麻烦,请到我博客园的  文件区  下载这个demo的源码。

 

2. demo效果图

    

 3. ui-route是啥?有啥优势?

    其实,anjularjs 提供了内置的ng-route,但是不怎么好用。ui-route相对于ng-route的优势大致如下:

  (1) ui-route可以同时加载多个ui-view,同一张页面加载多个视图。ng-route 只能加载一个视图

  (2) ui-route支持 ui-view 中的页面中也有ui-view,这样视图可以嵌套

  (3) ui-route 提供了很多控制视图的方法,让我们操作视图更便捷

 

4. ui-route基础用法

  

<div id="ui-route">
     <ul>
      <!--路由状态跳转的按钮-->
<li ui-sref="jia_dian">家电</li> <li ng-click="goChuJu()">厨具</li> </ul>
    <!--打开的新页面跳转到的位置-->
<div class="indexView" ui-view="indexView"></div> </div> <script type="text/javascript">
  
//注入路由模块 var myApp = angular.module("myApp", ["ui.router"]);
  
//传入配置路由的模块 myApp.config(function($stateProvider, $urlRouterProvider){ $urlRouterProvider.when('indexView', "jia_dian"); $stateProvider
        
//路由状态名字,与HTML的ui-sref名字对应 .state("jia_dian",{
          
//相对的URL url:"/jia_dian", views:{
            
//加载到哪一个 ui-view "indexView":{
              //新页面路径 templateUrl:
'page/jia_dian.html',
              
//新页面控制器 controller: "myControll" } } }) .state("chu_ju",{ url:"/chu_ju", views:{ "indexView":{ templateUrl:'page/chu_ju.html', controller: "myControll" } } }) }) .controller("myControll",function($scope,$state,$stateParams){ $scope.goChuJu=function(){ $state.go("jia_dian.jd_phone",{}) }; }) </script>

 

 

  在HTML中给标签添加 ui-sref="状态名";

  定义好App之后,配置config,注入 $stateProvider ,通过state配置路由状态;

  当前标签被点击时,就会加载对应页面。

  还可以用 $state.go("jia_dian.jd_phone",{}) 函数,直接跳转到指定的路由状态

  总之,ui-route 路由页面跳转只有  标签价  ui-sref  和 调用  $state.go()  函数

 

5. 如何实现多个视图分别加载页面

  接下来说明一下如何同时加载多个视图

 

<div id="ui-route">
    <ul>
        <li ui-sref="jia_dian">家电</li>
    </ul>
    <div class="indexView" ui-view="indexView"></div>
    <div class="view1" ui-view="view1"></div>
    <div class="view2" ui-view="view2"></div>
</div>


<script type="text/javascript">
    var myApp = angular.module("myApp", ["ui.router"]);
        myApp.config(function($stateProvider, $urlRouterProvider){
            $urlRouterProvider.when('indexView', "jia_dian");
            $stateProvider
                .state("jia_dian",{
                    url:"/jia_dian",
                    //通过view属性进行制定ui-view的页面分配
                    views:{
                        //视图indexView 的插入内容
                        "indexView":{
                            templateUrl:'page/jia_dian.html',
                            controller: "myControll"
                        },
                        //视图view1 的插入内容
                        "view1":{
                            templateUrl:'page/notice.html',
                            controller: "myControll"
                        },
                        //视图view2 的插入内容
                        "view2":{
                            templateUrl:'page/buy.html'
                        }
                    }
                })
        })
</script>

 

  同时加载多个视图,很简单,只需要再HTML中分别定义好每个视图的名字,然后在 state 的 views 中配置每个view该导入的页面。这样就可以实现一个 index 页面中有3个 view,而且每个view都加载自己的HTML文件,实现自己的控制。

  但是,有个问题,同一页面的中的 view ,同一时间只能响应一个路由状态的变化。

  举一个简单的例子:

   如果,我将 家电、美食 分别加载到 view1、view2 ,这是没问题的。刷新页面之后,就可以实现2个view分别显示 家电、美食。但是如果我家电中点击还能分别加载别的手机、电脑页面,而我在美食点击之后还能分别加载苹果、香蕉页,那这个时候就会发生冲突。路由只能相应一个状态。比如,点击 家电——手机,手机页在 view 中的 jd_view 显示了,此时再点击 美食——苹果,苹果页会在 view2显示,但是view1的手机页面会被刷新掉,不显示。家电依然不会变化。

  在demo中也有这个问题,大家可以看一下具体的图:

    

 

6. 如何实现多个视图嵌套,视图中套视图

  还是,先看代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul class="jiadian">
            <li ui-sref="jia_dian.jd_computer">电脑</a></li>
            <li ng-click="goPhone()">手机</li>
            <li ui-sref="jia_dian.jd_TV">电视</li>
        </ul>
        <div class="jdView" ui-view="jdView"></div>
    </body>
    <script>
    .........
        //家电内部,电脑、手机等详情
        //注意,视图的嵌套,路由状态必须是嵌套的形式,jia_dian.jd_computer。
        //如果,路由状态只是jd_computer,这里新加载的视图会默认加载到父视图indexView中
        //切记,多层嵌套一定要把每次视图状态名一个个点链接下去,否则会出问题
                .state("jia_dian.jd_computer",{
                    //这里也可以传参数
                    url:"/jd_computer",
                    views:{
                        "jdView":{
                            controller: function($scope,$stateParams){
                                $scope.myWord = $stateParams.word;
                                console.log($stateParams);
                                console.log($stateParams.word);
                            },
                            templateUrl:'page/jia_dian/jd_computer.html'
                        }
                    }
                })
                .state("jia_dian.jd_phone",{
                    url:"/jd_phone",
                    views:{
                        "jdView":{
                            templateUrl: 'page/jia_dian/jd_phone.html',
                            controller: "myControll"
                        }
                    }
                })
                .state("jia_dian.jd_TV",{
                    url:"/jd_TV/?aa",
                    views:{
                        "jdView":{
                            controller: function($scope,$stateParams){
                                console.log($stateParams);
                                console.log($stateParams.word);
                            },
                            templateUrl: 'page/jia_dian/jd_TV.html'
                        }
                    }
                })
     .........
    </script>
</html>

  嵌套也很简单,主要是路由状态的确定,再就是加载到哪个view。

  因为 电脑 页面是在 家电页面之中的,所以 路由状态名必须加上他父页面的路由,即 jia_dian.jd_computer,中间用点链接。

  注意:(1) 点 前面的名字是 父页面的路由状态,一定要一致

     (2)嵌套了多少层路由,路由状态就写都写清楚了,不能漏

       (3)如果 不写父页面的路由,那页面会直接加载到他的父页面 所在 的view中,并且会将父页面给刷掉,只显示新加载的页面

       (4)新页面加载到哪,取决于你的views写的啥,当然,我们一般会在父页面中写个 ui-view ,让新加载页面显示在里面

  多视图的嵌套,关键点 就是路由状态名 写对了, views写明确了。

 

7. ui-route如何实现页面传参

  注意,这个路由传递参数是URL传参,只能小规模的传字符串之类的;如果是大量数据,还是用 服务 传递,或者直接放在本地存储中,方便读取。不过这里还是给大家介绍一下ui-route的传参方式。

  首先,看代码:

<div id="ui-route">
    <ul>
        <li ui-sref="jia_dian">家电</li>
        <li ui-sref="mei_shi">美食</li>
        <li ui-sref="chu_ju({word:'这是向家电页面传递的参数word'})">厨具</li>
    </ul>
    <div class="indexView" ui-view="indexView"></div>
    <div class="view1" ui-view="view1"></div>
    <div class="view2" ui-view="view2"></div>
</div>

<script type="text/javascript">
..................
    .state("jia_dian", {
            //url 第一次加载页面时,有URL可以自动显示默认的页面,没有只会在点击按钮之后才能加载视图
            //而且刷新页面时,如果没有写URL,页面不会保存,加了,简单刷新并不会使页面消失
            url: "/jia_dian",
            views: {
                "indexView": {
                    templateUrl: 'page/jia_dian.html',
                    controller: "myControll"
                }
            }
        })
        .state("jia_dian.jd_phone", {
            url: "/jd_phone/?word&script&obj",
            views: {
                "jdView": {
                    templateUrl: 'page/jia_dian/jd_phone.html',
                    controller: function($scope, $stateParams) {
                        console.log($stateParams);
                        console.log($stateParams.word);
                        console.log($stateParams.obj);
                    }
                }
            }
        })
        .controller("myControll", function($scope, $state, $stateParams) {
            $scope.goPhone=function(){
                $state.go("jia_dian.jd_phone",{
                    word:"前去手机页面",
                    script:"我将跳转到jd_phone,即从 家电页 到 手机页,我在 家电的controller中写$state.go函数,并附上参数,然后再路由中问号传参",
                    obj:{a:"aa",b:"bb"}
                })
            };
        })
...................
</script>

 其实很简单,就是URL传参,步骤如下:

  1. 在父页面HTML中     <li ui-sref="chu_ju({word:'这是向家电页面传递的参数word'})">厨具</li>   这是先定义好要传递的变量,附好值

  2. 定义变量的另一种方式 就是在 $state.go"jia_dian.jd_phone",{word:"前去手机页面"})函数中,这也是在准备需要传递的变量

  3.上述两种是触发路由状态的2种方式,分别是自己的传参方式,都是在父页面的HTML、控制器中。

  4. 在子页面路由状态中配置将传的参数  url: "/jd_phone/?word&script&obj",  和问号传参一样,多个参数用 & 隔开。

  5.在跳转到的页面,他的控制器中注入 $stateParams ,然后就可以打印 $stateParams 这个对象了。

  注意:声明、赋值 是在 父页面 做的,传递是在 子页面路由中做的,使用、查看在子页面的控制器。滤清思路就很简单了。

 

以上,是我对 ui-route 使用的一点见解,希望对大家能有帮助。如有错误的地方,还请朋友们指出!!!

 

posted @ 2017-09-13 15:17 Mr.聂 阅读(...) 评论(...) 编辑 收藏