探讨AngularJs中ui.route的简单应用


Posted in Javascript onNovember 16, 2016

html页面代码

<body ng-app="myApp">
<div ui-view></div>

<div ui-view="login"></div>

<div ui-view="enroll"></div>
</body>

需要引用的ui.router.js文件

<script src="angular-ui-router.js"></script>

app.js

将UI-Router作为web应用的依赖,注入到主程序:

url:url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态(地址显示链接)。这样当在浏览该应用的时候便能实现深度链接的效果。

var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider', routeConfig]);
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('');
$stateProvider.state('competition', {
url: '/competition',
templateUrl: '/competition.html',
controller: 'competitionController'
}).state('competition.detail', {
url: '/competition-detail',
templateUrl: '/competition-detail.html',
controller: 'competitionDetailController'
}).state.('competition.enrollForm',{
url: '/competition.enrollForm',
templateUrl: 'competition-enrollFrom.html',
controller: 'enrollFromController'
}).state.('competition.comments',{
url: '/competition-comments',
templateUrl: 'competition-comments.html',
controller: 'commentsController'
}).state('competition.login',{
url: '/competition-login',
views: {
'login@': {
templateUrl: 'competition-login.html',
controller: 'loginController'
}
}
}).state('competition.enroll',{<br> url: '/competition-enroll',<br> views: {<br> 

'enroll@': {<br><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> 

 templateUrl: 'competition-enroll.html',<br></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel">


controller: 'enrollController'<br></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> })<br></em></em></em></em></em></em></em></em></em><em id="__mceDel">}</em>

需要注意的是:ui.router使用的是$stateProvider,ngRoute使用的是$routeProvider。

$state.go

$state.go(to, [,toParams],[,options])

形参to是string类型,必须,使用"^"或"."表示相对路径;

形参toParams可空,类型是对象;

形参options可空,类型是对象,字段包括:location为bool类型默认true,inherit为bool类型默认true, relative为对象默认

$state.$current,notify为bool类型默认为true, reload为bool类型默认为false

$state.go('photos.detail')

$state.go('^')到上一级,比如从photo.detail到photo

$state.go('^.list')到相邻state,比如从photo.detail到photo.list

$state.go('^.detail.comment')到孙子级state,比如从photo.detail到photo.detial.comment

以上所述是小编给大家介绍的AngularJs中ui.route的简单应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JQuery球队选择实例
May 18 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
jQuery 插件封装的方法
Nov 16 #Javascript
Node.js 数据加密传输浅析
Nov 16 #Javascript
JS中substring与substr的用法
Nov 16 #Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 #Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 #Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 #Javascript
input框中的name和id的区别
Nov 16 #Javascript
You might like
PHPEXCEL 使用小记
2013/01/06 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHP数组操作类实例
2015/07/11 PHP
php将html转为图片的实现方法
2017/05/19 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
python局部赋值的规则
2013/03/07 Python
python实现决策树
2017/12/21 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python实现超市商品销售管理系统
2019/11/22 Python
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
学生打架检讨书
2014/02/14 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle