Question

I wanted to add a Login-Screen to my Ionic-App. But somehow the App just goes white when the urlRouterProvider points to the specified path. At the moment it looks like this:

login.html (template)

<ion-view view-title="login">
  <ion-content class="padding">
    <label class="item item-input">
      <span class="input-label">Username</span>
      <input type="text">
    </label>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password">
    </label>
  </ion-content>
</ion-view>

Fairly simple, just to input fields.

the app.js containts this:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

    .state('dash.login', {
      url: '/login',
      views: {
        'login': {
          templateUrl: 'templates/login.html',
          controller: 'LoginCtrl'
        }
      }
    })

  $urlRouterProvider.otherwise('/tab/dash/login');

Yes, the dash view should be parent of the login. Controller exists, but has no functionality at this moment:

.controller('LoginCtrl', function($scope) {})

I am very new, but according to the most online documentations this should already work! I added a new view, created the state according to it, then pointed the urlRouterProvider to it, which works since the start screen of the app is plain white at the moment with the navbar at the top, added the empty controller and that's it.

There is no service yet and I didn't change the index.html. The App is a Tab-based template of Ionic, with the tabs.html looking like this:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Dashboard Tab -->
  <ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Kalender Tab -->
  <ion-tab title="Kalender" icon-off="ion-calendar" icon-on="ion-calendar" href="#/tab/chats">
    <ion-nav-view name="tab-chats"></ion-nav-view>
  </ion-tab>

  <!-- Fangbuch Tab -->
  <ion-tab title="Fangbuch" icon-off="ion-folder" icon-on="ion-folder" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>


</ion-tabs>

What am I missing here?

Answer 1

您需要添加与登录屏幕对应的视图。在index.html中，您是否看到了<ion-nav-view name="tab-dash"></ion-nav-view>的位置？请注意，该视图的名称与ui-router状态中的视图名称相对应：

.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

话虽如此，我发现这笔笔可以帮助你朝着正确的方向前进 - https://codepen.io/ionic/pen/CbBsA

Added View in Ionic shows up plain white

1 个答案: