uiRoute--路由嵌套（同一页面多次使用不同的路由）

一、uiRouter的基本使用步骤

uiRouter：以状态为基本单位
①引入ionic-bundle.js、指定依赖于ionic模块
②指定容器
ui-view
③创建代码片段
④设置状态
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('',{})
$urlRouterProvider.otherwise('myPerson')
})
⑤直接修改地址栏、超链接（href='#/url'）、js（$state.go('状态名称')）、扩展属性ui-sref='home'
⑥参数传递

二、发送参数的基本步骤
uiRouter
明确发送和接收，置接收方的状态($stateParams)，发送参数

demo:
从登陆页跳转到主页面并传递一个参数：id 3
①明确发送方和接收方
发送：登录页面
接收方：主页面
②配置接收方的状态
main--> url:'/myMain/:id'
$stateParams.id
③发送参数
button ui-sref="main({id:2})">登录去主页面-uiSref</button>
<a href="#/myMain/4">跳转到主页面-href</a>
<button ng-click="jump('main',{id:3})">登录到mainjs</button>

$scope.jump = function (state,arg) {
$state.go(state,arg);
}

三、uiRouter中嵌套路由

嵌套路由：在指定的容器中，插入的代码片段（还可以指定uiView）

步骤：
①首先需要指定盛放代码片段的容器，如果加载到容器的代码片段A，需要加载其他的代码片段B、C到A中，就是一个嵌套

②对于B、C设置状态的时候，如果A状态为stateA，指定为stateA.stateB,stateA.stateC
(

$stateProvider
.state('mail',{
url:'/myMail',
templateUrl:'tpl/mail.html'
})
.state('mail.inbox',{
url:'/myInBox',
templateUrl:'tpl/inbox.html'
})
.state('mail.outbox',{
url:'/myOutBox',
templateUrl:'tpl/outbox.html'
})

)

③触发状态
指定状态
<ion-list>
<ion-item ui-sref="mail.inbox">收件箱</ion-item>
<ion-item ui-sref="mail.outbox">发件箱</ion-item>
</ion-list>

 示例代码如下：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body>
11     <ion-header-bar>
12         <h1 class="title">Header-路由嵌套</h1>
13     </ion-header-bar>
14     <ion-content>
15         <p>Hello</p>
16         <div ui-view></div>
17     </ion-content>
18     <ion-footer-bar>
19         <h1 class="title">Footer</h1>
20     </ion-footer-bar>
21 <script>
22     var app = angular.module('myApp', ['ionic']);
23     app.config(function($stateProvider,$urlRouterProvider){
24         $stateProvider
25                 .state('mail',{
26                     url:'/myMail',
27                     templateUrl:'tpl/mail.html',
28                     controller:"mailCtr"
29                 })
30                 .state('mail.inbox',{
31                     url:'/myInbox',
32                     templateUrl:'tpl/inbox.html'
33                 })
34                 .state('mail.outbox',{
35                     url:'/myOutbox',
36                     templateUrl:'tpl/outbox.html'
37                 })
38         $urlRouterProvider.otherwise('myMail');
39     })
40 //    创建控制器 指定一个加载中的方法
41     app.controller('mailCtr',[
42         '$scope',
43         '$ionicLoading',
44         '$timeout',
45         function($scope,$ionicLoading,$timeout){
46         $scope.load = function(){
47             $ionicLoading.show({
48                 template:'正在加载中...'
49             })
50             $timeout(function(){
51                 $ionicLoading.hide();
52             },1500)
53         }
54     }]);
55 </script>
56 </body>
57 </html>

mail页面代码如下：

 1 <h1>欢迎登录邮箱</h1>
 2 
 3 <div class="row">
 4     <div class="col col-33">
 5         <ion-list>
 6             <ion-item ng-click="load()" ui-sref="mail.inbox">收件箱</ion-item>
 7             <ion-item ng-click="load()" ui-sref="mail.outbox">发件箱</ion-item>
 8         </ion-list>
 9     </div>
10     <div class="col">
11         <!--  指定代码盛放的容器 -->
12         <div ui-view></div>
13     </div>
14 </div>

 

inbox页面代码如下：

1 <h1>收件箱列表</h1>
2 <ion-list>
3     <ion-item>邮件1</ion-item>
4     <ion-item>邮件2</ion-item>
5     <ion-item>邮件3</ion-item>
6     <ion-item>邮件4</ion-item>
7     <ion-item>邮件5</ion-item>
8 </ion-list>

outbox页面代码如下：

<h1>发件箱列表</h1>
<ion-list>
    <ion-item>邮件1</ion-item>
    <ion-item>邮件2</ion-item>
    <ion-item>邮件3</ion-item>
    <ion-item>邮件4</ion-item>
    <ion-item>邮件5</ion-item>
</ion-list>

效果图如下：

 

posted @ 2017-01-10 13:06  时间脱臼  阅读(217)  评论(0)    收藏  举报