AngularJS学习日记（五）UI-Route

栏目: JavaScript · 发布时间: 5年前

内容简介：ui-view替代的是ngroute路由的ng-view。简单的Demo：先注入了ui.router ，之前我注入的都是ui-router，我特么还以为是版本的问题。

ui-view替代的是ngroute路由的ng-view。

<div ui-view></div>
复制代码

简单的Demo：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .active {
            color: red; font-weight: bold;
        }
    </style>

</head>
<body ng-app="helloworld">
<a ui-sref="hello-world" ui-sref-active="active">hello</a>

<a ui-sref="world" ui-sref-active="active">world</a>

<div ui-view style="margin-left: 50px"></div>

</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/home/home.js"></script>
</html>
复制代码

angular.module('helloworld', ['ui.router'])

    .config(function($stateProvider){
        $stateProvider.state('hello-world',{
            url:'/hello',
            template:'<h3>hello world!</h3>'
        }).state('world',{
            url:'/world',
            templateUrl:'../resources/static/components/world/world.html'
        }).state('world.world1',{
            url:'/world/world-1',
            template:'<h3>This is a World 1</h3>'
        }).state('world2',{
            url:'/world/world-2',
            template:'<h3>world2并不依赖于world，在我们点击它的时候，他会替换掉index.html中的<div ui-view></div></h3>'
        })

    });

复制代码

先注入了ui.router ，之前我注入的都是ui-router，我特么还以为是版本的问题。

注意以后，在config对服务进行参数初始化，这里初始化的是stateProvider。

效果图：

嵌套路由

嵌套路由顾名思义就是路由里面还有一个路由，uiroute能做到ngroute做不到的事情，这就是其中一个。

index的JS：

angular.module('helloworld', ['ui.router'])

    .config(function($stateProvider){
        $stateProvider.state('hello',{
            url:'/hello',
            template:'<h3>hello world!</h3>'
        }).state('world',{
            url:'/world',
            templateUrl:'../resources/static/components/world/world.html'
        }).state('world.world1',{
            url:'/world/world-1',
            template:'<h3>This is a World 1</h3>'
        }).state('world2',{
            url:'/world/world-2',
            template:'<h3>world2并不依赖于world，在我们点击它的时候，他会替换掉index.html中的ui view</h3>'
        })

    });

复制代码

world的HTML：

<div>
    <a ui-sref=".world1" ui-sref-active="active">world-1</a>
    <br>
    <a ui-sref="world2" ui-sref-active="active">world-2</a>

    <div ui-view style="margin-left: 50px"></div>
</div>
复制代码

先看index的JS，world.world1 ，这个.world1就是子路由，同时在world的html里面，ui-sref里面也是有带.的，但是world2是没有的，所以world2不是子路由，所以当点击world2的时候，他就会替换掉整个ui -view，而不是ui-view里面的ui-view（子路由）。

子路由：

不是子路由：

ps：template里面写这么乱，是因为我结构就是这么乱。正确的结构其实我自己也不是很清楚，我这个结构是模仿之前大佬给我看的项目，但是他那个项目是springboot的。我的结构：

通过views实现多视图

多个示图时，使用views属性。该属性里包含了哪些ui-view，则对应的template或templateUrl里的内容就会填充该ui-view。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过views实现多视图</title>
</head>
<body >
    <div ng-app="myApp" >
        <a ui-sref="index">点我显示index内容</a>
        <div ui-view="header"></div>
        <div ui-view="nav"></div>
        <div ui-view="body"></div>
    </div>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/view/view.js"></script>
</html>
复制代码

angular.module('myApp', ['ui.router'])
    .config(["$stateProvider",  function ($stateProvider) {
        $stateProvider
            .state("index", {
                url: '/index',
                views:{
                    'header':{template:"<div>头部内容</div>"},
                    'nav':{template:"<div>菜单内容</div>"},
                    'body':{template:"<div>展示内容</div>"}
                }
        })

}]);

复制代码

效果图：

ui view的定位

@的作用是用来绝对定位view，即说明该ui-view属于哪个模板。如：’header@index’表示名为header的view属于index模板。绝对和相对路径的效果一样

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-app="myApp" >
        <a ui-sref="index">show index</a>
        <a ui-sref="index.content1">content111111</a>
        <a ui-sref="index.content2">content222222</a>
        <div ui-view="index"></div>
    </div>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/uiview/uiview.js"></script>
</html>
复制代码

js：

angular.module('myApp',['ui.router'])

    .config(['$stateProvider',function ($stateProvider) {
        $stateProvider
            .state('index',{
                url:'/index',
                views:{
                    'index':{template:"<div><div ui-view='header'></div><div ui-view='nav'></div> <div ui-view='body'></div></div>"},
                    //这里必须要绝对定位
                    'header@index':{template:'<div>头部内容header</div>'},
                    'nav@index':{template:'<div>菜单内容nav</div>'},
                    'body@index':{template:'<div>展示内容contents</div>'}
                }
            })
            //绝对定位
            .state('index.content1',{
                url:'content1',
                views:{
                    'body@index':{template:'<div>content11111111111</div>'}
                }
            })
            //相对定位：该状态里的body的ui-view为相对路径下的（即没有说明具体是哪个模板）
            .state('index.content2',{
                url:'/content2',
                views:{
                    'body':{template:'<div>content2222222222222222222222</div>'}
                }
            })
    }])
复制代码

效果：

URL路由传参（通过$stateParams服务获取参数）

有url: '/index/:id',和url: '/index/{id}',两种形式传参：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<body >
    <div ng-app="myApp" >
        <a ui-sref="index({id:30})">show index</a>
        <a ui-sref="test({username:'peter'})">show test</a>
        <div ui-view></div>
    </div>
</body>

</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/stateParams/stateParams.js"></script>
</html>
复制代码

angular.module('myApp', ['ui.router'])
    .config(["$stateProvider",  function ($stateProvider) {
        $stateProvider
            .state("index", {
                url: '/index/:id',
                template:"<div>indexcontent</div>",
                controller:function($stateParams){
                    alert($stateParams.id)
                }
            })
            .state("test", {
                url: '/test/:username',
                template:"<div>testContent</div>",
                controller:function($stateParams){
                    alert($stateParams.username)
                }
            })

    }]);
复制代码

和狗子一起成为更好的人。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JavaScript王者归来

月影 / 清华大学出版社 / 2008-7 / 86.00元

你手中的这本《JavaScript王者归来》不仅是一本传播知识的书，更是一本求道的书。本书分为五个部分循序渐进地与读者讨论了JavaScript的方方面面，从简单的语言基础到丰富的实际应用再到深入剖析语言本质的高级话题，字里行间包含着作者多年工作中对JavaScript实践乃至程序设计思想的深入思考和总结。本书揭开了JavaScript的面纱，绕过误解和虚幻的表象，引领你探索程序王......一起来看看《JavaScript王者归来》这本书的介绍吧!

码农工具