Question

我对离子相对较新，所以我想在这里创建我的第一个离子应用程序。

我只是想让基本标签栏应用程序的脚手架启动并运行。为此，我在www中创建了一个app文件夹，并启动了我自己的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');

});

我还在app文件夹中使用以下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

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

Answer 2

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

抽象州

＆＃34; ...抽象状态可以有子状态，但不能自行激活。一个＆＃39;摘要＆＃39;国家只是一个无法转变的国家。当其中一个后代被激活时，它会被隐式激活......＆＃34;

阅读此article或查看离子版本中的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');
});

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

2 个答案: