首先给大家介绍angular-ui-router的基本用法。
如何引用依赖angular-ui-router
$stateProvider.state(stateName,stateConfig)
stateName是string类型 stateConfig是object类型 //statConfig可以为空对象 $stateProvider.state("home",{}); //state可以有子父级 $stateProvider.state("home",{}); $stateProvider.state("home.child",{}) //state可以是链式的 $stateProvider.state("home",{}).state("about",{}).state("photos",{});
stateConfig包含的字段:template,templateUrl,templateProvider,controller,controllerProvider,resolve,url,params,views,abstract,onEnter,onExit,reloadOnSearch,data
$urlRouteProvider
$urlRouteProvider.when(whenPath,toPath) $urlRouterProvider.otherwise(path) $urlRouteProvider.rule(handler)
$state.go
$state.go(to,[,toParams],options]) 形参to是string类型,必须,使用"^"或"."表示相对路径; 形参toParams可空,类型是对象; 形参options可空,类型是对象,字段包括:location为bool类型默认true,inherit为bool类型默认true,relative为对象默认$state.$current,notify为bool类型默认为true,reload为bool类型默认为false
$state.go('photos.detail') $state.go('^')到上一级,比如从photo.detail到photo $state.go('^.list')到相邻state,比如从photo.detail到photo.list $state.go('^.detail.comment')到孙子级state,比如从photo.detail到photo.detial.comment
ui-sref
ui-sref='stateName' ui-sref='stateName({param:value,param:value})'
ui-view
==没有名称的ui-view
hi
" })或者这样配置:
hi
" } } })==有名称的ui-view
hi
" } } })==多个ui-view
hi
"},"data": {template: "项目文件结构
node_modules/ partials/ .....about.html .....home.html .....photos.html app.js index.html
创建state和view
app.js
index.html
state之间的跳转
index.html
以上通过ui-sref属性完成state之间的跳转。
多个view以及state嵌套
有时候,一个页面上可能有多个ui-view,比如:
假设,以上页面属于一个名称为parent的state中。
我们知道在ui-router中,一个state大致是这样设置的:
所有state下views下的所有键值对(类似 "body@content":{templateUrl: 'partials/photos.html'})都被放到一个键值集合中。而ui-view的工作原理就是根据自己的属性值,到这个键值集合中去找匹配的键,找到就把对应的页面显示出来。
点击header对应的页面链接,可能会跳转到另外的子页面出现在
在现有的文件结构上增加content.html,header.html,文件结构变为:
node_modules/ partials/ .....about.html .....home.html .....photos.html .....content.html .....header.html app.js index.html
content.html 包含了多各ui-view,一个ui-view和页头相关,保持不变;令一个ui-view和会根据页头上的点击呈现不同的内容
header.html 把原先indext.html中nav部分放到这里来
index.html 这时变成了这样
app.js 路由现在这样设置
这时候,页面是这样呈现出来的:
→ 来到home这个路由
以上,告诉我们partials/home.html将会被加载到与"body@content"匹配的ui-view中。暂时对应的ui-view还没有出现,于是等待。
→ 路由看到index.html上的
于是,就找到了content这个state下views下的 "":{templateUrl: 'partials/content.html'}这个键值对,把partials/content.html显示出来。
→ 分别加载partials/content.html页面上的各个部分
看到
"header@content":{templateUrl: 'partials/header.html'},
看到
→ 点击header上的链接
点击,来到:
把partials/photos.html显示到
点击
把partials/about.html显示到
state多级嵌套
以上,在路由设置中,state名称有content,content.photos有了这样的一层嵌套。接下来,要实现state的多级嵌套。
在photos.html页面准备加载一个子页面,叫做photos-list.html; 与photo-list.html页面相邻的还有一个页面,叫做photo-detail.html; 在photo-detail.html页面上加载一个子页面,叫做photos-detail-comment.html;
这样,页面有了嵌套关系,state也相应的会有嵌套关系。
现在,文件结构变成:
node_modules/ partials/ .....about.html .....home.html .....photos.html .....content.html .....header.html .....photos-list.html .....photo-detail.html .....photos-detail-comment.html app.js index.html
photos.html 加一个容纳子页面的ui-view
photos
如何到达这个子页面呢?修改header中的相关部分如下:
以上,通过来到photos.html的子页面photos-list.html.
photos-list.html 通过2种途径到相邻页photo-detail.html
photo-detail.html 又提供了来到其子页面photos-detail-comment.html的ui-view
photos-detail-comment.html 则很简单:
photos-detail-comment
app.js state多级嵌套的设置为
抽象state
如果一个state,没有通过链接找到它,那就可以把这个state设置为abstract:true,我们把以上的content和content.photos这2个state设置为抽象。
那么,当一个state设置为抽象,如果通过ui-sref或路由导航到该state会出现什么结果呢?
--会导航到默认路由上
$urlRouterProvider.otherwise('home');
即
最终把partials/home.html显示出来。
使用控制器
在实际项目中,数据大多从controller中来。
首先在路由中设置state所用到的控制器以及控制器别名。
添加controller.js,该文件用来定义所用到的controller.现在的文件结构为:
asserts/ .....css/ .....images/ ..........image1.jpg ..........image2.jpg ..........image3.jpg ..........image4.jpg node_modules/ partials/ .....about.html .....home.html .....photos.html .....content.html .....header.html .....photos-list.html .....photo-detail.html .....photos-detail-comment.html app.js
index.html
controllers.js
以上,通过$scope.$$childTail.ctrPhotoList在父state中的controller中拿到子state中的controller;通过$scope.$parent.ctrPhoto在子state中的controller中拿到父state中的controller。
photos-list.html
photos-list
state间如何传路由参数
在content.photos.detail这个state设置接收一个路由参数。
photos-list.html 送出一个路由参数