Ionic angular-ui-router小案例

在实际开发中使用angular-ui的router模块是一种比较流行的做法。不同与angularJs本身的路由机制，angular-UI-router基于状态机，提供了嵌套路由等一系列功能。

在使用angular-ui-router的过程中，由于很难调试，并且没有报错信息。因此颇为不易。下面是一个简单的嵌套视图例子。

1. index.html 很简单。在body里面声明了ion-nav-view指令.和切换的动画效果。也可以用ui-view来代替。

 1 <!doctype html>
 2 <html class="no-js">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 6     <title>NursingManagement</title>
 7     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 8 
 9     <meta name="format-detection" content="telephone=no">
10 
11     <!-- inject:app-styles:css --><!-- endinject -->
12 </head>
13 <body ng-app="NursingManagement">
14 
15 <ion-nav-view animation="slide-left-right"></ion-nav-view>
16 
17 <!-- inject:vendor:js --><!-- endinject -->
18 <!-- inject:app:js --><!-- endinject -->
19 
20 <script src="cordova.js"></script>
21 
22 </body>
23 </html>

2. main.html. 一个ionic的侧拉菜单。声明了内容区域和左侧菜单。其中内容区域由固定的tabs组件和一个视图构成。侧拉菜单中也可以继续声明view。

<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content drag-content="true">
  
   <ion-nav-view name="myContainer">
   </ion-nav-view>

    <ion-tabs class="tabs-positive tabs-icon-top">
    
      <ion-tab title="消息" href="#/main/message" icon-on="ion-chatbubble-working" icon-off="ion-chatbubble">
      </ion-tab>    
      <ion-tab title="图表" href="#/main/chart" icon-on="ion-ios-pie" icon-off="ion-ios-pie-outline">
      </ion-tab>
      <ion-tab title="审核" href="#/main/compose" icon-on="ion-ios-compose" icon-off="ion-ios-compose-outline">
      </ion-tab>
    </ion-tabs>

    

</ion-side-menu-content>

<!-- Left Menu -->
<ion-side-menu side="left">
            <p>这里是侧拉菜单</p>
</ion-side-menu>

</ion-side-menus>

3. app.js (核心)

 .config(function($httpProvider, $stateProvider, $urlRouterProvider) {
    // register $http interceptors, if any. e.g.
    // $httpProvider.interceptors.push('interceptor-name');

    // Application routing
    $stateProvider
      .state('main', {
        url: '/main',
        templateUrl: 'templates/main.html'
      })
      .state('main.message',{
        url:'/message',
        views:{
          'myContainer':{
            templateUrl:'templates/views/message.html'
          }
        }       
      })
      .state('main.chart',{
        url:'/chart',
        views:{
          'myContainer':{
           templateUrl:'templates/views/chart.html'
          }
        }   
      })
      .state('main.compose',{
        url:'/compose',
        views:{
          'myContainer':{
            templateUrl:'templates/views/compose.html'
          }
        }      
      })
      ;



    // redirects to default route for undefined routes
    $urlRouterProvider.otherwise('/main');
  });

一些坑：

1. 之前不知道在声明state的时候abstract属性是做什么用的。设置abstract为true的话，程序进去是白屏。后来看api的解释是这样的。

An abstract state will never be directly activated, but can provide inherited properties to its common children states.

可见，abstract state本身不会直接起作用，但是可以被子状态继承。

2. state的名称。要主要符号 . 的正确使用。父状态和子状态的概念要了解。

3. url参数的路径没必要一定遵循父状态的路径。