AngularJS路由Ui-router模块用法示例


Posted in Javascript onMay 29, 2017

本文实例讲述了AngularJS路由Ui-router模块用法。分享给大家供大家参考,具体如下:

由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了。

ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能。

现在就开始做几个DEMO接触一下ui-route。

<!--初始页面-->
<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body >
<div ng-app="myApp">
<div><a ui-sref = "index">首页</a></div>
<div ui-view></div><!--这里是路由视图存放的地方-->
</div>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script src="test2.js"></script>
</body>
</html>

首先必须引用angular-ui-router.js文件。这个文件是区别于AngularJs的angular-route.js文件的。而且必须把该文件放在angular.min.js下面。

观察一下Html的body代码,可以发现有三个地方与使用原生的ng-route时的body代码不同。他们分别是ui-sref , index 以及ui-view 。先跳过,看一下如何初始化ui-route模块。

初始化ui-route模块:

var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:'/',
      template:'<div>我是首页内容</div>'
    })
}]);

首先,和原生ng-route路由模块相似的是,必须先把ui-route注入。然后再进行具体的配置。与原生的ng-route不同的是,ui-route用state() 代替了原生的when() ,它在when(),的基础上新增了一个参数,这里是index,用以区分这部分路由对哪一个命令进行响应。

回到之前的<div><a ui-sref = "index">首页</a></div> ,大概就知道他们视图和它之间的关系了。ui-view 代替了以往的ng-view ,ui-sref 替换掉了以前的ng-href,而它也不再是指向链接,而是指向“导航”的名字。

其中的url属性可以唯一标识改路由的后续地址,用以跟后面的路由进行区分。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 #Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 #Javascript
Angular2使用jQuery的方法教程
May 28 #jQuery
Angular.js实现动态加载组件详解
May 28 #Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 #Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 #Javascript
Angular2入门教程之模块和组件详解
May 28 #Javascript
You might like
PHP5常用函数列表(分享)
2013/06/07 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
Yii框架安装简明教程
2020/05/15 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
JS开发常用工具函数(小结)
2019/07/04 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
python3中set(集合)的语法总结分享
2017/03/24 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
施工安全协议书
2013/12/11 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
python b站视频下载的五种版本
2021/05/27 Python