wie Seite ohne Tabs in ionic

verwenden

ich versuche, neue Seite in ionic zu verwenden, ich neue Route in app.js erstellen, aber wenn ich diese Seite ausführen nichts zeigt.wie Seite ohne Tabs in ionic

danke für Hilfe.

app.js

var myApp = angular.module('starter', ['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.styleDefault(); 
    } 
    }); 
}) 
.config(function($stateProvider,$urlRouterProvider){ 
    $stateProvider 
    .state('etudiant', { 
      url: '/etudiant', 
      controller: 'etudiantCtrl', 
      templateUrl: 'etudiant.html' 
    }) 
     .state('tabs', { 
     url: '/tab', 
     abstract: true, 
     templateUrl: 'templates/tabs.html' 
     }) 
     .state('tabs.home', { 
     url: '/home', 
     views: { 
      'home-tab' : { 
      templateUrl: 'templates/home.html' 
      } 
     } 
     }) 
     .state('tabs.list', { 
     url: '/list', 
     views: { 
      'list-tab' : { 
      templateUrl: 'templates/list.html', 
      controller: 'ListController' 
      } 
     } 
     }) 
     .state('tabs.login', { 
     url: '/login', 
     views: { 
      'login-tab' : { 
      templateUrl: 'templates/login.html', 
      controller: 'LoginController' 
      } 
     } 
     }) 
     .state('tabs.detail', { 
     url: '/list/:aId', 
     views: { 
      'list-tab' : { 
      templateUrl: 'templates/detail.html', 
      controller: 'ListController' 
      } 
     } 
     }) 
     .state('tabs.welcome', { 
     url: '/welcome', 
     views: { 
      'welcome-tab' : { 
      templateUrl: 'templates/welcome.html', 
      controller: 'ListController' 
      } 
     } 
     }) 
    $urlRouterProvider.otherwise('/tab/home'); 
    })

index.html

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link rel="manifest" href="manifest.json"> 

    <!-- un-comment this code to enable service worker 
    <script> 
     if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('service-worker.js') 
      .then(() => console.log('service worker installed')) 
      .catch(err => console.log('Error', err)); 
     } 
    </script>--> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    </head> 
    <body ng-app="starter"> 

    <ion-nav-view> 

    </ion-nav-view> 
    </body> 
</html>

tabs.html

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

    <ion-tab title="Home" icon="ion-home" 
      href="#/tab/home"> 
    <ion-nav-view name="home-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Formation" icon="ion-calendar" 
      href="#/tab/list"> 
    <ion-nav-view name="list-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Espace Etudiant" icon="ion-ios-people" 
      href="#/tab/login"> 
    <ion-nav-view name="login-tab"></ion-nav-view> 
    </ion-tab> 

</ion-tabs>

etudiant.html

<ion-header-bar class="bar-positive"> 
    <h2 class="title">welcome</h2> 
</ion-header-bar>

Quelle

2016-12-27 laakissi achraf

Prüfung für Konsole eine Fehlermeldung? –

templateUrl: 'etudiant.html' ||| Sicher sollte das nicht Vorlagen/edudiant.html sein? – yBrodsky

nichts in der Konsole angezeigt. Pfad meiner Datei etudiant.html: templates/etudiant.html. –

Einige Änderungen, wenn Sie eine Seite, bevor Sie Registerkarten hinzufügen möchten.

In app.js ändern Sie die folgende Zeile richtigen Pfad zu der Datei zu finden, sonst wird es nicht Last: templateUrl: 'etudiant.html' zu
templateUrl: 'templates/etudiant.html'
In app.js auch die folgende Zeile in diesen auf dem Standard ändern Seite, wenn $urlRouterProvider.otherwise('/tab/home'); zu $urlRouterProvider.otherwise('/etudiant');

die App läuft hinzufügen Logik etudiant.html so können Sie diese Seite verlassen und um Ihre Tabs

<ion-header-bar class="bar-positive"> 
    <h2 class="title">welcome</h2> 
</ion-header-bar> 

<ion-view> 
    <ion-content> 
     <h1>Testing</h1> 
     <button ng-click="leave()">Leave</button> 
    </ion-content> 
</ion-view>

Add Logik etudiantCtrl zu routen Sie auf die Registerkarten Ansicht

.controller('etudiantCtrl', function($scope, $state) { 
    $scope.leave = function(){ 
    console.log('Leaving...') 
    $state.go('tab.home'); 
    } 
})

Quelle

2016-12-27 15:01:28 Sam5487

wie Seite ohne Tabs in ionic

Antwort

Verwandte Themen