探讨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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
php 中include()与require()的对比
2006/10/09 PHP
mysql总结之explain
2012/02/27 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
初识Node.js
2014/09/03 Javascript
jQuery基础知识小结
2014/12/22 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
Vue项目安装插件并保存
2019/01/28 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
pycharm 安装JPype的教程
2019/08/08 Python
中文专业毕业生自荐书范文
2014/01/04 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
老龄工作先进事迹
2014/08/15 职场文书
django中websocket的具体使用
2022/01/22 Python
Django基础CBV装饰器和中间件
2022/03/22 Python