angularjs中ui-router如何实现路由的二级嵌套

这篇文章主要为大家展示了“angularjs中ui-router如何实现路由的二级嵌套”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angularjs中ui-router如何实现路由的二级嵌套”这篇文章吧。

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。成都创新互联公司是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站制作、成都网站设计、软件开发、设计服务业务。我们始终坚持以客户需求为导向，结合用户体验与视觉传达，提供有针对性的项目解决方案，提供专业性的建议，创新互联建站将不断地超越自我，追逐市场，引领市场！

1.首先我们的页面层次为

其中Main.html是我们的主页，我们要在main.html中对路由进行统一的管理。

main.html页面中有一个ui-view在这里将填充PageTab.html，同时被填充的PageTab.html中也有一个ui-view

这样就实现了嵌套路由。

最终效果：

angularjs中ui-router如何实现路由的二级嵌套

当我们点击Page-1时出现的是Page1中的内容，同理点击Page-2。

下面是实际的代码：

Main.html











Main page

PageTab.html





Insert title here


PageTab
  
     Page-1
     Page-2

Page1.html





Page1


  Page1

Page2.html





Page2


  Page2

以上是全部的页面代码，Main.html中js库需要手动导入。

下面我们重点看Main.html中对路由统一管理的部分也就是这段js代码

一共三个状态：

第一个状态

.state("PageTab",{
      url:"",
      templateUrl:"PageTab.html"
    })

在第一个中我们定义了初始状态名为PageTab，url状态为空，这时候在母版中将会在ui-view中填充PageTab.html这个页面。

第二个状态

.state("PageTab.Page1",{
      url:"/Page1",
      templateUrl:"Page1.html"
    })

我们把这个状态名字命名为PageTab.Page1 这时候的路由将会交给PageTab来处理，即在PageTab.html页面中的ui-view中填充Page1.html中的内容。同理如果state命名为PageTab.Page2 那么处理它的就会是PageTab.html这个页面。

以上是“angularjs中ui-router如何实现路由的二级嵌套”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享文章：angularjs中ui-router如何实现路由的二级嵌套
文章链接：http://cqcxhl.com/article/piijhp.html

重庆分公司，新征程启航

angularjs中ui-router如何实现路由的二级嵌套

Main page

PageTab

Page1

Page2

其他资讯