探讨AngularJs中ui.route的简单应用  更新时间:2016年11月16日 16:42:15   作者:会捕鼠的鱼   这篇文章主要介绍了AngularJs中ui.route的简单应用,非常不错,具有参考借鉴价值,需要的朋友可以参考下 html页面代码          需要引用的ui.router.js文件 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’,{   url: ‘/competition-enroll’, views: {     ’enroll@’: {      templateUrl: ‘competition-enroll.html’,      controller: ‘enrollController’ } } })} 需要注意的是: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的简单应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章: 浅析angularJS中的ui-router和ng-grid模块 Angularjs中UI Router的使用方法 Angularjs中UI Router全攻略 AngularJS 使用 UI Router 实现表单向导 AngularJS入门教程之路由机制ngRoute实例分析 AngularJS监听路由的变化示例代码 AngularJS 路由详解和简单实例 AngularJS 路由和模板实例及路由地址简化方法(必看) 使用AngularJS对路由进行安全性处理的方法 Angularjs制作简单的路由功能demo AngularJS基于ui-route实现深层路由的方法【路由嵌套】 angularjs ui route 相关文章 ng-alain的sf如何自定义部件的流程 这篇文章主要介绍了ng-alain的sf如何自定义部件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2020-06-06 AngularJS页面带参跳转及参数解析操作示例 这篇文章主要介绍了AngularJS页面带参跳转及参数解析操作,结合具体实例形式分析了AngularJS使用URL传递参数及参数的接收、解析等相关操作技巧,需要的朋友可以参考下 2017-06-06 angularjs表格分页功能详解 本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码,非常的简单实用,有需要的小伙伴可以参考下。 2016-01-01 RequireJS 依赖关系的实例(推荐) 下面小编就为大家带来一篇RequireJS 依赖关系的实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 AngularJS通过ng-Img-Crop实现头像截取的示例 本篇文章主要介绍了AngularJS通过ng-Img-Crop实现头像截取的示例,具有一定的参考价值,有兴趣的可以了解一下 2017-08-08 对Angular中单向数据流的深入理解 这篇文章主要给大家介绍了关于对Angular中单向数据流的深入理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-03-03 angularjs ui-router中路由的二级嵌套 本篇文章主要介绍了angularjs ui-router中路由的二级嵌套,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-03-03 AngularJS 最常用的功能汇总 angularjs功能在项目开发中经常会用到,本文给大家总结了八种angularjs最常用的功能,感兴趣的朋友一起学习吧 2016-02-02 解决ionic和angular上拉加载的问题 这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下 2017-08-08 详解Angular6 热加载配置方案 这篇文章主要介绍了详解Angular6 热加载配置方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-08-08 最新评论

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的简单应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • 浅析angularJS中的ui-router和ng-grid模块
  • Angularjs中UI Router的使用方法
  • Angularjs中UI Router全攻略
  • AngularJS 使用 UI Router 实现表单向导
  • AngularJS入门教程之路由机制ngRoute实例分析
  • AngularJS监听路由的变化示例代码
  • AngularJS 路由详解和简单实例
  • AngularJS 路由和模板实例及路由地址简化方法(必看)
  • 使用AngularJS对路由进行安全性处理的方法
  • Angularjs制作简单的路由功能demo
  • AngularJS基于ui-route实现深层路由的方法【路由嵌套】
张贴在3