ui.router

tyust512

于 2016-01-21 16:26:04 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS

本文链接：https://blog.csdn.net/tyust512/article/details/50556063

AngularJS 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了ui.router和ng.router在基于state和url的路由技术上的区别，详细解析了路由配置、重定向、状态显示及参数存储等核心功能，并通过实例展示了如何在父级和子级组件间实现嵌套视图与路由导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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