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的tab切换 js原理
Apr 01 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
小程序云开发之用户注册登录
May 18 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
asp.net和php的区别点总结
2019/10/10 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
PHP7新特性简述
2017/06/11 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python中redis的安装和使用
2016/12/04 Python
Python numpy 常用函数总结
2017/12/07 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
应届生找工作求职信
2014/06/24 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
Django中session进行权限管理的使用
2021/07/09 Python