在实际开发中使用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参数的路径没必要一定遵循父状态的路径。