Angular-ui-router:基于AngularJS的可嵌套路由

ui-router是一个可以用来替换AngularJS原生路由的插件,它最大的特点就是支持嵌套路由。

ui.router

关于ui-router的安装,可以使用npmbowerjspmcomponent,也可以直接下载源文件来引入。

那么,什么是嵌套路由呢?

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的。比如这样:<div ng-view></div>。一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图。比如这样:

这是属于AngularJS的原生路由定义。从表面上看似乎挺方便,没有什么太大的问题。但是细想一下,如果说我们有一个网页,左边是菜单栏,右边是各个菜单所对应的视图。那么,如果按照这样的定义,点击每个菜单项,岂不得刷新整个网页?而我们想要的只是右边的视图刷新。所以,这就要用到嵌套路由了。

关于嵌套路由

所谓嵌套路由,就是视图里面还可以再嵌套视图,路由里还可以再嵌套路由。并且,通过ui-router,可以实现不同视图之间的参数传递。

关于ui-router的简单使用

ui-router定义路由的时候,与ngRouter不一样,它是使用.来进行定义的,并且在html标签里,不使用ng-view,而是使用ui-view。比如<div ui-view></div>

ui-router提供了$stateProvider$urlRouterProvider来进行路由定义。具体使用如下:

以上是关于ui-router的简单用法。当然,这还看不出来和Angular的原生路由的区别。因为这都是只涉及了一层路由。

关于ui-router的嵌套路由的使用

关于嵌套路由的使用,可以用这样一个例子来说明。以AngularJS的API Guide为例。

这是一个典型的左右结构。左边为菜单条目,右边为视图。并且,菜单条目里,有主条目,主条目下面有子条目。

点击就会现,刷新的只是右边的视图,左边并没有刷新。说明左边和右边是分开的视图。那么,这个就是用的ui-router来实现的。

在主页面文件里:

那么,有了index.html之后,就需要把主要的页面加载到这里面,所以,添加一个main.html文件。

OK,现在在main.html里也定义了一个ui-view,这个ui-view就是用来加载视图的。

router.js里,就可以这样写。

通过这样一层一层的不断定义,就可以简单实现嵌套路由了。

如果需要了解ui-router更深层次的用法,可以查看其官方文档

开发资源

官方网站:http://angular-ui.github.io/ui-router/
开源地址:https://github.com/angular-ui/ui-router

2 1 收藏

资源整理者简介:Erichain

简介还没来得及写 :) 个人主页 · 贡献了1个资源


直接登录
最新评论
  • bage88   2016/02/22

    推荐。

  • C.丛   2016/03/19

    写的比较基础

  • 回旋大风车 程序猿 2016/04/27

    66666666666666

  • 这是一个典型的左右结构。左边为菜单条目,右边为视图。并且,菜单条目里,有主条目,主条目下面有子条目。

    点击就会现,刷新的只是右边的视图,左边并没有刷新。说明左边和右边是分开的视图。那么,这个就是用的ui-router来实现的。

    现在嵌套路由完成了,我想现在是点击右边的视图里面的链接然后实现当前视图页面刷新怎样解决呢?

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1438 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer