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 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
vue实现购物车的监听
Apr 20 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python对列表排序的方法实例分析
2015/05/16 Python
python实现各进制转换的总结大全
2017/06/18 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
结婚通知短信大全
2015/04/17 职场文书
新课程改革心得体会
2016/01/22 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
vue动态绑定style样式
2022/04/20 Vue.js
Python使用openpyxl模块处理Excel文件
2022/06/05 Python