探讨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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
js格式化时间小结
Nov 03 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
微信小程序获取当前位置和城市名
Nov 13 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
php适配器模式简单应用示例
2019/10/23 PHP
javascript 写类方式之四
2009/07/05 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
某公司C#程序员面试题笔试题
2014/05/26 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
大学军训感言800字
2014/02/27 职场文书
中秋寄语大全
2014/04/11 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
辅导员评语
2014/05/04 职场文书
宿舍标语大全
2014/06/19 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL
一文搞懂Redis中String数据类型
2022/04/03 Redis