AngularJS ui-router (嵌套路由)的简单学习
2021-07-10 07:04
YPE html>
标签：pre data- asc height app 自己 加载 显示 标记
今天让我们一起来学习一下AngularJS里的嵌套路由。
ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性，嵌套路由功能主要是依赖$stateProvider服务,$urlRouterProvider服务与 ui-view实现。.
首先我们先使用AngularJS框架来创建简单的html和JavaScript页面。
我们需要创建的文件有一下这些：
1.先创建主体页面 main.html
2.嵌套路由页面 page.html
3.在创建三个子页面 page1.html 、 page1.html 、 page1.html
注意：在使用这个方法时，记得要引入angular-ui-route.js插件哦！
main.html
创建页面如下：
"mk">"myApp"> 路由嵌套的主体页-----AngularJS Home Page (Ui-router)
"">//必填
Page.html
创建页面如下：
Page1.html
创建页面如下：
Page 子页面1
Page2.html
创建页面如下：
Page 子页面2
Page3.html
创建页面如下：
Page 子页面3
以上还是个开始，主体页面main.html还没有嵌套page.html页面，接下来先把page.html页面嵌套在其中吧。
此时main.html
创建页面如下：（红色部分为新加内容）
"mk">
"myApp">路由嵌套的主体页-----AngularJS Home Page (Ui-router)
"">
效果图：（现在的链接还未添加内容）
接下来完善一下Page.html
创建页面如下：
"padding-right: 20px" ui-sref=".Page1">"javascript:;">Page-1 "padding-right: 20px" ui-sref=".Page2">"javascript:;">Page-2 "padding-right: 20px" ui-sref=".Page3">"javascript:;">Page-3
最后我们把main.html修改完整，让在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候需要页面在占位标记那里显示出来。
【完整的main.html】
"mk">"myApp"> 路由嵌套的主体页-----AngularJS Home Page (Ui-router)
"">
好了，AngularJS里的嵌套路由到现在就全部实现了，你们快点在自己的本上运行一下吧！
AngularJS ui-router (嵌套路由)的简单学习
标签：pre data- asc height app 自己 加载 显示 标记
原文地址：http://www.cnblogs.com/yhyanjin/p/7091079.html
上一篇：多行文本省略号的实现.html
文章标题：AngularJS ui-router (嵌套路由)的简单学习
文章链接：http://soscw.com/essay/103117.html