脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → ui router 二级路由

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

 更新时间：2017年03月10日 16:48:31   作者：upuphaha  
本篇文章主要介绍了angularjs ui-router中路由的二级嵌套，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

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

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

 

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

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

这样就实现了嵌套路由。

最终效果：

 

当我们点击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可以继续关注本站。

您可能感兴趣的文章:

相关文章

  • 关于Angular2 + node接口调试的解决方案

    关于Angular2 + node接口调试的解决方案

    这篇文章主要给大家介绍了关于Angular2 + node接口调试的解决方案，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • Angular中ng-options下拉数据默认值的设定方法

    Angular中ng-options下拉数据默认值的设定方法

    本篇文章主要介绍了Angular中ng-options下拉数据默认值的设定方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解使用angular的HttpClient搭配rxjs

    详解使用angular的HttpClient搭配rxjs

    本篇文章主要介绍了详解使用angular的HttpClient搭配rxjs ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS服务service用法总结

    AngularJS服务service用法总结

    这篇文章主要介绍了AngularJS服务service用法,结合实例形式总结分析了服务Service的概念、功能及自定义服务的相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • AngularJS通过$location获取及改变当前页面的URL

    AngularJS通过$location获取及改变当前页面的URL

    本篇将介绍AngularJS中的$location服务的基本用法,$location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录。本文通过示例代码介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-09-09
  • 创建你的第一个AngularJS应用的方法

    创建你的第一个AngularJS应用的方法

    这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下
    2015-06-06
  • 在AngularJS中使用AJAX的方法

    在AngularJS中使用AJAX的方法

    这篇文章主要介绍了在AngularJS中使用AJAX的方法,示例非常简单,并不能完全体现出AJAX动态刷新的强大功能,需要的朋友可以参考下
    2015-06-06
  • Angular开发实践之服务端渲染

    Angular开发实践之服务端渲染

    这篇文章主要介绍了Angular开发实践之服务端渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解Angular.js指令中scope类型的几种特殊情况

    详解Angular.js指令中scope类型的几种特殊情况

    AngularJs最重要也是最难理解的模块之一就是它的指令（directive）了，自定义指令配置有很多个参数，下面这篇文章主要介绍了关于Angular.js指令中scope类型的几种特殊情况，需要的朋友可以参考下。
    2017-02-02
  • AngularJS中实现显示或隐藏动画效果的方式总结

    AngularJS中实现显示或隐藏动画效果的方式总结

    AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有功能，其中一项主要的特性是Angular对动画的支持。下面通过本文给大家介绍AngularJS中实现显示或隐藏动画效果的方式总结，对angularjs动画效果相关知识感兴趣的朋友一起学习
    2015-12-12

最新评论