AngularJS ui-router (嵌套路由)实例


Posted in Javascript onMarch 10, 2017

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的。比如这样:<div ng-view></div>。一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图。比如这样:

var bookStoreApp = angular.module('bookStoreApp', [ 
  'ngRoute', 'ngAnimate', 'bookStoreCtrls', 
]); 
bookStoreApp.config(function($routeProvider) { 
  $routeProvider.when('/hello', { 
    templateUrl: 'tpls/hello.html', 
    controller: 'HelloCtrl' 
  }).when('/list', { 
    templateUrl: 'tpls/bookList.html', 
    controller: 'BookListCtrl' 
  }).otherwise({ 
    redirectTo: '/hello' 
  }) 
});

这是属于AngularJS的原生路由定义。从表面上看似乎挺方便,没有什么太大的问题。但是细想一下,如果说我们有一个网页,左边是菜单栏,右边是各个菜单所对应的视图。那么,如果按照这样的定义,点击每个菜单项,岂不得刷新整个网页?而我们想要的只是右边的视图刷新。所以,这就要用到嵌套路由了。

所谓嵌套路由,就是视图里面还可以再嵌套视图,路由里还可以再嵌套路由。并且,通过ui-router,可以实现不同视图之间的参数传递。

ui-router定义路由的时候,与ngRouter不一样,它是使用.来进行定义的,并且在html标签里,不使用ng-view,而是使用ui-view,比如<div ui-view></div>。ui-router提供了$stateProvider,$urlRouterProvider来进行路由定义。

下面的实例演示如何实现路由嵌套:

home.html

创建如下的html页面:

<div class="jumbotron text-center"> 
  <h1>Home</h1> 
  <p>This page demonstrates 
    <span class="text-danger">nested</span>views. 
  </p> 
  <a ui-sref=".list" class="btn btn-primary">List</a> 
  <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a> 
</div> 
<div ui-view></div>

home-list.html

创建如下的html页面:

<ul> 
  <li ng-repeat="topic in topics">{{ topic }}</li> 
</ul>

about.html

创建如下的html页面:

<div class="jumbotron text-center"> 
  <h1>The About Page</h1> 
  <p>This page demonstrates 
    <span class="text-danger">multiple</span>and 
    <span class="text-danger">named</span>views.</p> 
</div> 
<div class="row"> 
  <div class="col-md-6"> 
    <div ui-view="columnOne"></div> 
  </div> 
  <div class="col-md-6"> 
    <div ui-view="columnTwo"></div> 
  </div> 
</div>

table-data.html

创建如下的html页面:

<h2>Ice-Creams</h2> 
<table class="table table-hover table-striped table-bordered"> 
  <thead> 
    <tr> 
      <td>Name</td> 
      <td>Cost</td> 
    </tr> 
  </thead> 
  <tbody> 
    <tr ng-repeat="topic in topics"> 
      <td>{{ topic.name }}</td> 
      <td>${{ topic.price }}</td> 
    </tr> 
  </tbody> 
</table>

注意,到目前为止,我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段,我们需要一个占位或者说父页面来装下这些页面片段。让我们把这个页面叫做 index.html.

index.html

用如下内容创建这个html页面

<!doctype html> 
<html ng-app="routerApp"> 
<head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" > 
  <script src="js/angular.min.js"></script> 
  <script src="js/angular-animate.js"></script> 
  <script src="js/angular-ui-router.js"></script> 
  <script src="app.js"></script> 
</head> 
<body> 
  <nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
      <a class="navbar-brand" ui-sref="#">AngularUI Router</a> 
    </div> 
    <ul class="nav navbar-nav"> 
      <li> 
        <a ui-sref="home">Home</a> 
      </li> 
      <li> 
        <a ui-sref="about">About</a> 
      </li> 
    </ul> 
  </nav> 
  <div class="container"> 
    <div ui-view=""></div> 
  </div> 
</body> 
</html>

在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class为Container的div中我们创建了一个<div ui-view=""></div>, 该 div 内的 HTML 内容会根据路由的变化而变化。在<a ui-sref="home"></a>中ui-sref 指令链接到特定状态。

在app.JS文件的内容,我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下:

var routerApp = angular.module('routerApp', ['ui.router']); 
routerApp.config(function($stateProvider, $urlRouterProvider) { 
  /*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态,那它就会默认将路径路由至 home.html, 
   *这个页面就是状态名称被声明的地方. */ 
  $urlRouterProvider.otherwise('/home'); 
  $stateProvider 
    .state('home', { 
      url: '/home', 
      templateUrl: 'tpls2/home.html' 
    }) 
   /* nested list with custom controller*/ 
  .state('home.list', { 
    url: '/list', 
    templateUrl: 'tpls2/home-list.html', 
    controller: function($scope) { 
      $scope.topics = ['Butterscotch', 'Black Current', 'Mango']; 
    } 
  }) 
  // nested list with just some random string data 
  .state('home.paragraph', { 
    url: '/paragraph', 
    template: 'I could sure use a scoop of ice-cream. ' 
  }) 
  .state('about', { 
    url: '/about', 
    /* view 用在该状态下有多个 ui-view 的情况,可以对不同的 ui-view 使用特定的 template, controller, resolve data 
     绝对 view 使用 '@' 符号来区别,比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的 
     模板(template),相对 view 则无*/ 
    views: { 
      // 无名 view 
      '': { 
        templateUrl: 'tpls2/about.html' 
      }, 
      // for "ui-view='columnOne'" 
      'columnOne@about': { 
        template: '这里是第一列的内容' 
      }, 
      // for "ui-view='columnTwo'" 
      'columnTwo@about': { 
        templateUrl: 'tpls2/table-data.html', 
        controller: 'Controller' 
      } 
    } 
  }); 
}); 
routerApp.controller('Controller', function($scope) { 
  $scope.message = 'test'; 
  $scope.topics = [{ 
    name: 'Butterscotch', 
    price: 50 
  }, { 
    name: 'Black Current', 
    price: 100 
  }, { 
    name: 'Mango', 
    price: 20 
  }]; 
});

AngularJS ui-router (嵌套路由)实例

AngularJS ui-router (嵌套路由)实例

AngularJS ui-router (嵌套路由)实例

 AngularJS ui-router (嵌套路由)实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 #Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 #Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 #Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 #Javascript
AngularJS之页面跳转Route实例代码
Mar 10 #Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 #Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 #Javascript
You might like
PHP中GET变量的使用
2006/10/09 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
python正则表达式re模块详解
2014/06/25 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
详细分析python3的reduce函数
2017/12/05 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python for i in range ()用法详解
2020/09/18 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
小学优秀教育工作者事迹材料
2014/05/09 职场文书
综治工作汇报材料
2014/10/27 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
活动宣传稿范文
2015/07/23 职场文书