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

    }]);

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