Hinzugefügte Ansicht in Ionic zeigt sich in einfachem Weiß

Question

Ich wollte meiner Ionic-App einen Login-Screen hinzufügen. Aber irgendwie wird die App nur weiß, wenn der urlRouterProvider auf den angegebenen Pfad zeigt. Im Moment sieht es wie folgt aus:

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> 

ziemlich einfach, nur um Eingabefelder ein. diese

die app.js containts:

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

Ja, sollte der Strich Ansicht Elternteil des Login sein. -Controller vorhanden ist, hat aber keine Funktion in diesem Moment:

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

Ich bin sehr neu, aber nach den meisten Online-Dokumentationen dies bereits funktionieren sollte! Ich habe eine neue Ansicht hinzugefügt, den Status entsprechend erstellt und dann den urlRouterProvider darauf gerichtet, was funktioniert, da der Startbildschirm der App im Moment einfach weiß ist, mit der Navigationsleiste oben, dem leeren Controller hinzugefügt und das wars.

Es gibt noch keinen Dienst und ich habe die index.html nicht geändert. Die App ist eine Tab-basierte Vorlage von Ionic, mit dem tabs.html wie folgt aussehen:

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

Was ich hier fehlt?

Answer 1

Sie müssten eine Ansicht hinzufügen, die Ihrem Anmeldebildschirm entspricht. Siehst du in deiner index.html, wo es steht <ion-nav-view name="tab-dash"></ion-nav-view>? Beachten Sie den Namen dieser Ansicht entspricht mit dem Namen der Ansicht in Ihrem ui-Router Zustand:

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

Mit diesem wird gesagt, hier ist ein Stift fand ich, dass, sollten Sie in die richtige Richtung helfen - https://codepen.io/ionic/pen/CbBsA