ui.router

阎咏思
2023-12-01

ui.router是基于state,ng.router是基于url”. 路由存在着明确的父子关系,每一个状态就是一个资源请求路径.

Provider

$urlRouterProvider

$urlRouterProvider.when('').otherwise('');

配置路由重定向

$stateProvider

配置路由

Service

$urlRouter

$state

显示当前路由状态信息,以及一些路由方法(如:跳转)

$stateParams

存储路由匹配时的参数

Directive

ui-view

嵌套视图

parent.html

<div ui-view>
     parent view
    <div ui-view="child ">child view</div>
</div>

route_config.js

$stateProvider
    .state('parent', {
        abstract: true,
        url: '/parent',
        templateUrl: '*****/parent.html'
    })
    .state('parent.child', {
        url: '/son',
        views: {
            'child ': {
                templateUrl: '*****/child.html',
            }
        }

    });

ui-sref

<a ui-sref="child">会跳转到child这个state</a>

它会跳出循环遍历rules, 直接跳到对应的state下,节约性能.

事件

捕捉事件

$rootScope.$on('$locationChangeSuccess', update);

$locationChangeSuccess

 类似资料: