探讨AngularJs中ui.route的简单应用

<body ng-app="myApp">   <div ui-view></div>   <div ui-view="login"></div>   <div ui-view="enroll"></div> </body>

需要引用的ui.router.js文件

<script src="https://www.jb51.net/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><em><em><em><em>      templateUrl: 'competition-enroll.html',<br></em></em></em></em></em><em><em><em><em><em><em>      controller: 'enrollController'<br></em></em></em></em></em></em><em><em><em><em><em><em><em> }<br></em></em></em></em></em></em></em><em><em><em><em><em><em><em><em> }<br></em></em></em></em></em></em></em></em><em><em><em><em><em><em><em><em><em> })<br></em></em></em></em></em></em></em></em></em><em>}</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的简单应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzfzs.html