Ionic angular-ui-router小案例

時間 2019-11-18

標籤 ionic angular router 案例欄目 AngularJS 简体版

原文原文鏈接

在實際開發中使用angular-ui的router模塊是一種比較流行的作法。不一樣與angularJs自己的路由機制，angular-UI-router基於狀態機，提供了嵌套路由等一系列功能。css

在使用angular-ui-router的過程當中，因爲很難調試，而且沒有報錯信息。所以頗爲不易。下面是一個簡單的嵌套視圖例子。html

1. index.html 很簡單。在body裏面聲明瞭ion-nav-view指令.和切換的動畫效果。也能夠用ui-view來代替。ios

 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。api

<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 (核心)app

 .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');
  });

一些坑：ionic

1. 以前不知道在聲明state的時候abstract屬性是作什麼用的。設置abstract爲true的話，程序進去是白屏。後來看api的解釋是這樣的。ide

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

可見，abstract state自己不會直接起做用，可是能夠被子狀態繼承。動畫

2. state的名稱。要主要符號 . 的正確使用。父狀態和子狀態的概念要了解。ui

3. url參數的路徑不必必定遵循父狀態的路徑。url

相關標籤/搜索