1.配置使用ui-router

1.1导入js文件

需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。

<script type="text/javascript" src="JS/angular.min.js"></script>
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>

1.2注入angular模块

var app = angular.module('myApp', ['ui.router']);

注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：
这里写图片描述

1.3定义视图

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

<div ui-view></div>

1.4配置路由状态

app.config(["$stateProvider", function ($stateProvider){       
    $stateProvider     
    .state("home", { //导航用的名字，如<a ui-sref="login">login</a>里的login
        url: '/',    //访问路径 
        template:'<div>模板内容......</div>'
    })      

 }]);

2.简单示例

<html>
  <head>   
    <title>ui-router</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!-- 导入JS -->
    <script type="text/javascript" src="JS/angular.min.js"></script>
    <script type="text/javascript" src="JS/angular-ui-router.min.js"></script>  
  </head>

  <body >   
    <div ng-app="myApp">        
        <div ui-view></div> <!-- 视图 -->     
    </div>  
  </body>


  <script type="text/javascript">
    //定义模板，并注入ui-router
    var app = angular.module('myApp', ['ui.router']);   
    //对服务进行参数初始化，这里配stateProvider服务的视图控制
    app.config(["$stateProvider",  function ($stateProvider) {      
        $stateProvider     
        .state("home", {
            url: '/',   
            template:'<div>模板内容......</div>'
        })     
    }]);  
  </script>

</html>

3.嵌套路由的实现

通过url参数的设置实现路由的嵌套（父路由与子路由通过”.“连接就形成了子路由）。嵌套路由可实现多层次的ui-view。

 <body >    
    <div ng-app="myApp" >
        <a ui-sref="parent">点我显示父view内容</a>
        <a ui-sref="parent.child">点我显示父view与子view内容</a>
        <div ui-view></div> <!-- 父View -->      
    </div>  
  </body>


  <script type="text/javascript">
    var app = angular.module('myApp', ['ui.router']);   
    app.config(["$stateProvider",  function ($stateProvider) {      
        $stateProvider     
        .state("parent", {//父路由
            url: '/parent',  
            template:'<div>parent'
                    +'<div ui-view><div>'// 子View
                    +'</div>'
        })      
        .state("parent.child", {//子路由
            url: '/child',    
            template:'<div>child</div>'
        })     
    }]);

  </script>

上面的是相对路径方式：
‘parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/parent/child。
若改成绝对路径方式，则需要在子url里加上^:

.state("parent.child", {
    url: '^/child',    
    template:'<div>child</div>'
})

此时，’parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/child。

4. 通过views实现多视图

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

同一个状态下有多个视图示例：

 <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 type="text/javascript">
    var app = angular.module('myApp', ['ui.router']);   
    app.config(["$stateProvider",  function ($stateProvider) {      
        $stateProvider     
        .state("index", {
            url: '/index',  
            views:{
                'header':{template:"<div>头部内容</div>"},
                'nav':{template:"<div>菜单内容</div>"},
                'body':{template:"<div>展示内容</div>"}
            }
        })      

    }]);

  </script>

5.ui-view的定位

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

<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 type="text/javascript">
    var app = angular.module('myApp', ['ui.router']);   
    app.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>content11111111111111111</div>"}
                //'body@index'表时名为body的view使用index模板
            }
        })  
        //相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的）
        .state("index.content2", {
            url: '/content2',  
            views:{
                'body':{template:"<div>content2222222222222222222</div>"}//
            }
        })      

    }]);

  </script>

由上面代码可知，相对定位不能找到的ui-view需要用@来绝对定位。

三个问题：

1、ui-sref 和 $state.go 的区别

ui-sref 一般使用在 <a> 标签上；而$state.go一般使用在 controller 里面。

2、$stateParams怎样获取参数？

在目标页面的controller里注入$stateParams，然后 "$stateParams.参数名" 获取传递的参数。

3、UI-ROUTER如何设置？

这里是如何设置一个基本url。

$stateProvider

.state('contacts', {

url:"/contacts",

templateUrl:'contacts.html'

})

当我们访问index.html/contacts时，'contacts'状态将被激活，同时index.html中的ui-view将被'contacts.html'填充。或者，通过transitionTo('contacts')方法将状态转变到'contacts'状态，同时 url 将更新为index.html/contacts。

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台。

每个职业以15个左右的task为初学者提供更快速高效的学习方式；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑

如何使用ui-router？

1.配置使用ui-router

2.简单示例

3.嵌套路由的实现

4. 通过views实现多视图

5.ui-view的定位

猜你喜欢