angular ui-router:简单的单页面嵌套路由的实现过程( 二 )


现在已经成功把appjs实现出来 , 然后需要在html里面定义视图 , 以及视图跳转链接
4.html定义视图
现在要把我们写好的html视图页面在页面中展示出来 , 我们来看看index.html里面的代码:

angular ui-router:简单的单页面嵌套路由的实现过程

文章插图

在ui-view=""的双引号里面 , ui-view展示的页面是根据app.js设置的url对应的html来展示的 。嵌套页面跳转: 导航里面的名字必须是“父页面的名字.子页面的名字”
比如:
.state("PageTab", {//这里是名字url: "/PageTab",templateUrl: "PageTab.html"}).state("PageTab.Page1", {//意思是PageTab视图下面的Page1视图url:"/Page1",templateUrl: "Page-1.html"})
在html里面 , 用ui-sref进行跳转
demo代码栗子:
下面这几个按钮是在主页面下面再嵌套一层的页面Page-1Page-2Page-3
如果觉得不太明白可以点击下面的代码地址 , 将代码复制到本地 , 自己多试一试 , 应该就明白了:
demo地址、demo代码地址
写在后面:
现在只是一个最简单的使用方式 , 本来想在写一些深一点的使用方式(内容:路由的其他参数、路由懒加载引用文件、路由视图页面传递参数) , 写了好久 , 结果发现还是需要demo结合起来写 , 比较清楚 , 等我写好了在下面加个链接 。
最后:如需转载 , 请放上原文链接并署名 。码字不易 , 感谢支持!因为我经常看不懂别人写的分享 , 所以个人写文比较偏小白 , 写的不好之处 , 欢迎指点 。然后就是希望看完的朋友点个喜欢 , 也可以关注一下我 。
ps:目前待业 , 城市:杭州/北京(纠结中) , 本人适应互联网快节奏 , 高强度的工作状态 , 认真 , 严谨 , 学习积极性强 。中小公司大佬求带走 , 邮箱: 。
掘金个人主页
参考资料:
路由,菜鸟教程
深究——ui-详解\
ui- (嵌套路由)