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类(纯JS, Ajax模式)
Mar 12 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
javascript call方法使用说明
Jan 11 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
详解Vue之计算属性
Jun 20 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php GUID生成函数和类
2014/03/10 PHP
php异常处理方法实例汇总
2015/06/24 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
详解微信小程序中组件通讯
2018/10/30 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
javascript+Canvas实现画板功能
2020/06/23 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python之py2exe打包工具详解
2017/06/14 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python pycharm的安装及其使用
2019/10/11 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
中学生检讨书范文
2014/11/03 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android