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 相关文章推荐
accesskey 提交
Jun 26 Javascript
prototype.js的Ajax对象
Sep 23 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
axios封装与传参示例详解
Oct 18 Javascript
微信小程序实现轮播图指示器
Jun 25 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python中with用法讲解
2020/02/07 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
服装厂厂长职责
2013/12/16 职场文书
工作时间上网检讨书
2014/02/03 职场文书
军人违纪检讨书
2014/02/04 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers