如何使用页面无标签离子

我试图在离子中使用新页面，我在app.js中创建新路线，但是当我运行此页面时什么也没有显示。如何使用页面无标签离子

感谢您的帮助。

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>

来源

2016-12-27 laakissi achraf

检查控制台错误？ –

templateUrl：'etudiant.html'|||当然，不应该是模板/ edudiant.html？ – yBrodsky

没有显示在控制台中。我的文件路径etudiant.html：templates/etudiant.html。 –

如果你希望你的标签前添加一个页进行一些更改。

在app.js更改以下行找到正确的路径的文件，否则将无法负荷： templateUrl: 'etudiant.html'到
templateUrl: 'templates/etudiant.html'
在app.js也更改以下行默认为这页面运行的应用程序$urlRouterProvider.otherwise('/tab/home');到$urlRouterProvider.otherwise('/etudiant');

时添加逻辑etudiant.html这样你就可以离开这个页面，让您的标签

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

添加逻辑来etudiantCtrl路由你的标签查看

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

来源

2016-12-27 15:01:28 Sam5487

如何使用页面无标签离子

回答

相关问题