探讨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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
js选项卡的实现方法
Feb 09 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 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
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
ES6 十大特性简介
2020/12/09 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python删除过期文件的方法
2015/05/29 Python
python中私有函数调用方法解密
2016/04/29 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
浅析Python四种数据类型
2018/09/26 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
会计毕业生自我鉴定
2013/11/04 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
模范教师材料大全
2014/12/16 职场文书
争先创优个人总结
2015/03/04 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
全陪导游词开场白
2015/05/29 职场文书
安全伴我行主题班会
2015/08/13 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js