深究AngularJS之ui-router详解

1.配置使用ui-router

1.1导入js文件

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

1.2注入angular模块

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

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

1.3定义视图

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

1.4配置路由状态

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

 }]);

2.简单示例

3.嵌套路由的实现

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

   
  

    点我显示父view内容
    点我显示父view与子view内容
    
    
  
 
 


 

上面的是相对路径方式：

‘parent'将匹配…./index.html#/parent； ‘parent.child'将匹配…./index.html#/parent/child。

若改成绝对路径方式，则需要在子url里加上^:

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

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

4. 通过views实现多视图

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

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

   
  

    点我显示index内容
    
 
    
 
    
   
  
 
 

 

5.ui-view的定位

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

  
  

    show index
    content111111
    content222222
    
       
  
 
 

 

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

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

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

   
  

    show index  
    show test
    

  
 
 

 

7.Resolve（预载入）

参考资料：

使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。

预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。

如果传入的时字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。

  
  

    show index  
    

  
 
 

 

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