欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

angularjs ui-router中路由的二级嵌套

程序员文章站 2022-11-19 21:54:36
关于ui-router中嵌套路由中的问题 1.首先我们的页面层次为   其中main.html是我们的主页,我们要在main.html中对路由进行...

关于ui-router中嵌套路由中的问题

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

angularjs ui-router中路由的二级嵌套 

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

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

这样就实现了嵌套路由。

最终效果:

angularjs ui-router中路由的二级嵌套 

当我们点击page-1时出现的是page1中的内容,同理点击page-2。

下面是实际的代码:

main.html

<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script>  
</script>
</head>
<body>
<h3>main page</h3>
  <div>
    <div ui-view></div>
  </div>
<script>
  angular.module("myapp",["ui.router"])
  .config(function($stateprovider){
    $stateprovider
    .state("pagetab",{
      url:"",
      templateurl:"pagetab.html"
    })
    .state("pagetab.page1",{
      url:"/page1",
      templateurl:"page1.html"
    })
    .state("pagetab.page2",{
      url:"/page2",
      templateurl:"page2.html"
    })
  })
</script>
</body>
</html>

pagetab.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
</head>
<body>
<h2>pagetab</h2>
  <div>
     <span style="width:100px" ui-sref=".page1"><a href="">page-1</a></span>
     <span style="width:100px" ui-sref=".page2"><a href="">page-2</a></span>
  </div>
  <div ui-view=""></div>
</body>
</html>

page1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>page1</title>
</head>
<body>
  <h2>page1</h2>
</body>
</html>

page2.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>page2</title>
</head>
<body>
  <h2>page2</h2>
</body>
</html>

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

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

<script>
  angular.module("myapp",["ui.router"])
  .config(function($stateprovider){
    $stateprovider
    .state("pagetab",{
      url:"",
      templateurl:"pagetab.html"
    })
    .state("pagetab.page1",{
      url:"/page1",
      templateurl:"page1.html"
    })
    .state("pagetab.page2",{
      url:"/page2",
      templateurl:"page2.html"
    })
  })
</script>

一共三个状态:

第一个状态

.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可以继续关注本站。