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 相关文章推荐
js中eval详解
Mar 30 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
php 动态多文件上传
2009/01/18 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
树结构之JavaScript
2017/01/24 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
python3 shelve模块的详解
2017/07/08 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
对Python函数设计规范详解
2019/07/19 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
仓库主管的岗位职责
2013/12/04 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
学生安全责任书
2014/04/15 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
工作分析计划书
2014/04/30 职场文书
村干部培训方案
2014/05/02 职场文书
校运动会广播稿300字
2014/10/07 职场文书
元旦标语大全
2014/10/09 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android