探讨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 UI 实现email输入提示实例
Aug 15 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
提问的智慧(2)
2006/10/09 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PDO::inTransaction讲解
2019/01/28 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
React diff算法的实现示例
2018/04/20 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python中协程用法代码详解
2018/02/10 Python
Python IDLE清空窗口的实例
2018/06/25 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
如何利用python生成MD5并去重
2020/12/07 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
回门宴父母答谢词
2014/01/26 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
2016银行求职自荐信
2016/01/28 职场文书
创业计划书之美容店
2019/09/16 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
Hive HQL支持2种查询语句风格
2022/06/25 数据库