ui-router详解ngRoute工具区别

Posted 2020-06-17

   我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.

angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.

angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.

后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.

ngRoute

使用时需要ui中用ng-view指令指定 如:<div ng-view></div>

url改变此区域会被刷新.

首先要配置注册 ngRoute 

var app = angular.module(“YIJIEBUYI", [‘ngRoute‘]);           

    app.config(function ($locationProvider) {  

});

 

路由设置:

angular.module(‘YIJIEBUYI‘).config([‘$urlRouterProvider‘,

function($urlRouterProvider) {

$urlRouterProvider

.when(“/blog", “/blog/index")

.otherwise("/blog/index");

});

 

ui-router

使用时需要ui中用ui-view指令指定 如:<div ui-view></div>

需要下载 ui-route 文件.

首先配置注册 ui-route

var app = angular.module(“YIJIEBUYI", [‘ui.router‘]);
    app.config(function () { 
    //路由配置
});

 

路由设置:

angular.module(‘YIJIEBUYI‘).config([‘$stateProvider‘,
function($stateProvider) {
    $stateProvider.state(‘blog‘,{
        url:‘/blog‘,
        views:{
            ‘container‘:{templateUrl:‘templates/blog/layout.html‘}
        }
    }).state(‘blog.index‘,{
        url:‘/index‘,
        views:{
            ‘container‘:{templaterUrl:‘templates/blog/index.html‘}
        }
    })
});

 

ngRoute  和  ui-route 相比:

$route       —>   $state

$routeParams      —>  $stateParams

$routeProvider      —>  $stateProvider

<div ng-view></div>      —>  <div ui-view></div>

 

设置路由相比:

$urlRouterProvider.otherwise(‘/blog/index‘);  设置默认路由还需要使用ngRoute来设置.

 

$stateProvider.state(‘blog.index‘, {url:’….’,views:{模板路径}); 见上面设置信息.

 

所以我们在上一篇博文简单介绍 ui-route路由控制器中既使用了ngRoute 也使用了 ui-route,就是因为

设置默认页还是要用到 ngRoute工具.

下面详细说下 ui-route 使用:

(1)父路由,子路由

ui-route子路由可以继承父路由,也就是说 state 设置可以嵌套,通过名称中的.(点)来区分层次.

如下面路由:

angular.module(‘YIJIEBUYI‘).config([‘$stateProvider‘,
function($stateProvider) {
    $stateProvider.state(‘blog‘,{
        url:‘/blog‘,
        views:{
            ‘container‘:{templateUrl:‘templates/blog/layout.html‘}
        }
    }).state(‘blog.index‘,{
        url:‘/index‘,
        views:{
            ‘container‘:{templaterUrl:‘templates/blog/index.html‘}
        }
    })
});

blog 对应的路由是 /blog

blog.index 对应的路由就是 /blog/index  (前面的/blog就是从父view中继承过来的)

blog.index 就是 blog的子view

(2)指定响应的view

<div ui-view="view1"></div> 
<div ui-view="view2"></div>

.state("blog.detail"),{  
    url:”/:blogID"  
    ,views:{  
        view1:{  
            templateUrl:"view1.html" 
        }  
        ,view2:{  
            templateUrl:"view1.html"  
        }  
    }  
}

(3) state 配置参数

url：默认相对路径（以^开头的是绝对路径） 

views：每个子视图可以包含自己的模板、控制器和预载入数据。 (后2项选填,控制器可以在view中绑定)

abstract：抽象模板不能被激活 

template: HTML字符串或者返回HTML字符串的函数

如:

$stateProvider.state(‘blog.detail‘, {
  template: ‘<h1>My Blog</h1>‘
})

templateUrl: HTML模板的路径或者返回HTML模板路径的函数

如:

$stateProvider.state(‘blog.detail‘, {
  templateUrl: ’templates/blog_detail.html‘
})

templateProvider：返回HTML字符串的函数 

如:通过函数返回html

$stateProvider.state(‘blog.detail‘, {
  templateProvider: function ($timeout, $stateParams) {
    return $timeout(function () {
      return ‘<h1>‘ + $stateParams.blogID + ‘</h1>‘
    }, 100);
  }
})

controller、controllerProvider：指定任何已经被注册的控制器或者一个作为控制器的函数 

resolve：在路由到达前预载入一系列依赖或者数据，然后注入到控制器中。 

data：数据不会被注入到控制器中，用途是从父状态传递数据到子状态。 

onEnter/onExit：进入或者离开当前状态的视图时会调用这两个函数 

 

(4)解决器 Resolve

可以使用 Resolve 为控制器提供可选的依赖注入项。

Relolve 是由 key/value 组成的键值对象.

key  – {string}：注入控制器的依赖项名称。

value - {string|function}：

string：一个服务的别名

function：函数的返回值将作为依赖注入项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（be resolved）才会被实例化。

比如,博客后台的视图都需要登录用户才能访问,那么判断是否登录就可以做成一个控制器依赖

$stateProvider.state(‘YIJIEBUYI‘, {
    url: “/admin",
    // 登录后才能访问
    resolve: {authentication:[‘YijiebuyiAuth‘, ‘$q‘, function(YijiebuyiAuth, $q){
        return $q.when().then(function(){
            return YijiebuyiAuth.authentication();
        });
    }]},
    views: {
        container: { templateUrl: “templates/admin_manage.html" }
    }
})

在上面的返回函数中我们注入了一个服务 YijiebuyiAuth ,这个服务里实现了登录判断的方法 authentication

(5)$state 对象提供自定义数据

$stateProvider
  .state(‘blog.index‘, {
    templateUrl: ’templates/blog_index.html‘,
    data: {
        current_page: 1,
        page_size: 20
    } 
})

上面 data 对象就是自定义数据,

里面定义了2页面的当前页和显示内容条数

在视图对应的 controller 中我们就可以通过下面的方法来获取自定义数据.

console.log($state.current.data.current_page);  // 1
console.log($state.current.data.page_size);  // 20

(5) onEnter 和 onExit 回调函数

onEnter: 当状态活跃时触发 什么是活跃???页面正在加载中…..我也求解!

onExit : 当状态不活跃时触发 什么是不活跃?? 页面加载完成...同求解!

$stateProvider.state("blog.detail", {
  template: ‘<h1>blog</h1>‘,
  resolve: { title: ‘一介布衣‘ },
  controller: function($scope, title){
    $scope.title = title;
  },
  // title 是解决依赖项注入控制器
  onEnter: function(title){ 
    if(title){ ... do something ... }
  },
  // title 是解决依赖项注入控制器
  onExit: function(title){
    if(title){ ... do something ... }
  }
})

所以,刚才上面做的解决依赖判断是否登录,完全可以在 onEnter 事件中判断登录状态,如果未登录,直接跳转到其他路由即可.

(6) 页面跳转

<a href="#/blog/1234”>博客详情</a> 
<a ui-sref=“blog.detail({blogID:blogID})”>博客详情</a>

$state.go(‘blog.detail‘, {blogID:blogID});

 

(7) 事件

state事件 

$rootScope.$on(‘$stateChangeStart‘, function(event, toState, toParams, fromState, fromParams){ ... })

$rootScope.$on(‘$stateNotFound‘, function(event, unfoundState, fromState, fromParams){ ... })

$rootScope.$on(‘$stateChangeSuccess‘, function(event, toState, toParams, fromState, fromParams){ ... })

$rootScope.$on(‘$stateChangeError‘, function(event, toState, toParams, fromState, fromParams, error){ ... })

 

view事件 

View被加载但是DOM树构建之前时： 

$scope.$on(‘$viewContentLoading‘, function(event, viewConfig){ ... }); 

View被加载而且DOM树构建完成时： 

$scope.$on(‘$viewContentLoaded‘, function(event){ ... });