相思资源网 Design By www.200059.com

关于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="/UploadFiles/2021-04-02/angular.min.js">

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

标签:
ui,router,二级路由,ui,router,嵌套,ui,router,嵌套路由

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“angularjs ui-router中路由的二级嵌套”

暂无angularjs ui-router中路由的二级嵌套的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。