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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
JS event使用方法详解
Apr 28 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
JS中的三个循环小结
Jun 20 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
微信小程序手势操作之单触摸点与多触摸点
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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php生成短域名函数
2015/03/23 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
我们的节日元宵活动方案
2014/08/23 职场文书
孝女彩金观后感
2015/06/10 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫