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

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