AngularJS学习日记（五）UI-Route

时间 2019-11-16

标签 angularjs 学习日记 route 栏目 AngularJS 繁體版

原文原文链接

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

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

简单的Demo：html

<!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，我特么还觉得是版本的问题。spring

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

效果图：springboot

嵌套路由bash

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

index的JS：iview

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：ide

<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（子路由）。ui

子路由：

不是子路由：

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)
                }
            })

    }]);
复制代码

和狗子一块儿成为更好的人。