设置离子选项卡式应用程序

Question

我对 ionic 比较陌生，所以在这里我想从头开始创建我的第一个 ionic 应用程序。

我只是想搭建一个基本的标签栏应用程序的脚手架运行。为此，我在 www 中创建了一个应用程序文件夹，并使用我自己的 app.js 启动。这是我的 app.js

angular.module("PelvicRehabLog", ["ionic"])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('home', {
    url: "/home",
    abstract: true,
    templateUrl: "app/home/home.html"
  });

    $urlRouterProvider.otherwise('/home');

});

我还在我的应用程序文件夹中创建了一个主文件夹，其中包含以下内容 home.html

<ion-nav-bar class="bar-balanced">
    <h1 class="title">Log</h1>
</ion-nav-bar>

<ion-tabs class="tabs-energized tabs-icon-top">

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon="ion-home" href="#">
    <ion-view name="tab-dash"></ion-view>
  </ion-tab>

  <!-- Chats Tab -->
  <ion-tab title="Status" icon="ion-home" href="#">
    <ion-view name="tab-dash"></ion-view>
  </ion-tab>

</ion-tabs>

并且我更改了 index.html

中的相关参考

    <script src="app/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="PelvicRehabLog">

在这个阶段，我希望看到一个带有两个选项卡的基本选项卡栏应用程序。但我所看到的只是一个空白屏幕。任何帮助表示赞赏。

Answer 1

在 index.html 内的 body 标签中包含 <ion-nav-view></ion-nav-view>。交叉检查您的控制台是否有错误。

Answer 2

您需要在抽象状态下添加一些子状态。

抽象状态

"... 抽象状态可以有子状态，但不能自行激活。'abstract' 状态只是一种无法转换到的状态。当它的后代之一时，它会被隐式激活已激活..."

阅读此 article 或查看来自 ionic 构建的 app.js 示例：

.config(function($stateProvider, $urlRouterProvider) {   
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
  'tab-dash': {
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
  }
}
})
.state('tab.chats', {
  url: '/chats',
  views: {
    'tab-chats': {
      templateUrl: 'templates/tab-chats.html',
      controller: 'ChatsCtrl'
    }
  }
 })
 .state('tab.chat-detail', {
  url: '/chats/:chatId',
  views: {
    'tab-chats': {
      templateUrl: 'templates/chat-detail.html',
      controller: 'ChatDetailCtrl'
    }
  }
})
.state('tab.account', {
url: '/account',
views: {
  'tab-account': {
    templateUrl: 'templates/tab-account.html',
    controller: 'AccountCtrl'
  }
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});

设置离子选项卡式应用程序

Setting up an ionic tabbed application

tabs

angularjs

ionic-framework

ionic