现在已经成功把appjs实现出来 , 然后需要在html里面定义视图 , 以及视图跳转链接
4.html定义视图
现在要把我们写好的html视图页面在页面中展示出来 , 我们来看看index.html里面的代码:
文章插图
在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- (嵌套路由)
- 译文 | Angular中的AoT编译
- angular之formgroup
- angularjs中使用ng-repeat的注意点
- angularjs执行ng-repeat判断完成状态,生成可复用性自定义指令
- 响应式Form Angular Form 学习笔记
- ng-repeat,ng-if angular笔记使用小技巧
- 加班安慰简单话,如何安慰加班的朋友
- 剥玉米粒的简单方法,怎样剥玉米粒?
- 小菜豆腐汤
- 【CSDN软件工程师能力认证学习精选】Python实现简单的神经网络