基於離子框架的移動應用導航中顯示的空白頁

這是我第一次體驗基於離子框架的移動app.my問題，是在Android設備中測試我的應用的白色空白頁面顯示。但它在瀏覽器中正常工作。我的應用程序的工作流程是首次登錄，然後重定向到homepage.homepage包含我的服務的一些圖標。點擊每個服務後，它重定向到詳細信息頁面。當重定向到詳細信息頁面不顯示我的內容時，只會顯示白色空白頁面。次錯誤沒有顯示。另一個問題是註冊後重定向到主頁再次發生同樣的問題，我不明白這是怎麼發生的。瀏覽器控制檯沒有顯示任何錯誤。我的index.html和app.js如下。基於離子框架的移動應用導航中顯示的空白頁

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { 
    $ionicConfigProvider.backButton.text('').previousTitleText(''); 
    $stateProvider 
.state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "templates/menu.html", 
    controller: 'AppCtrl' 
}) 
.state('app.detail', { 
    url: "/detail", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/detail.html", 
     controller: 'DetailCtrl' 
     } 
    } 
    }) 
    .state('app.contact', { 
    url: "/contact", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/contact.html" 
     } 
    } 
    }) 
    .state('app.payment', { 
    url: "/payment", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/payment.html" 
     } 
    } 
    }) 
    .state('app.cart_detail', { 
    url: "/cart_detail", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/cart_detail.html" 
     } 
    } 
    }) 
    .state('app.about', { 
    url: "/about", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/about.html" 
     } 
    } 
    }) 
    .state('slide', { 
    url: "/slide", 
    templateUrl: "templates/slide.html" 
    }) 
    .state('login', { 
     url: '/login', 
     templateUrl: 'templates/login.html', 
     controller: 'LoginCtrl' 

    }) 
.state('register', { 
     url: '/register', 
     templateUrl: 'templates/register.html', 
     controller: 'RegisterCtrl' 
    }) 

//start [email protected] 

.state('app.paymentnotification', { 
    url: "/paymentnotification", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/paymentnotification.html", 
      controller: 'PaymentCtrl' 
      } 
    } 
    }) 

    .state('verification', { 
    url: "/verification", 
views: { 
     '': { 
    templateUrl: "templates/verification.html", 
     controller: 'RegisterCtrl' 
} 
} 
    }) 

.state('paymentsecurity', { 
    url: "/paymentsecurity", 
    templateUrl: "templates/paymentsecurity.html", 
     controller: 'OrderpaymentCtrl' 


    }) 


    .state('app.home', { 
     url: "/home", 
     views: { 
     'menuContent': { 
      templateUrl: "templates/home.html", 
      controller: 'HomeCtrl' 
     } 
     } 
    }) 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/login'); 
});

我的index.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <!--<link href="css/animate.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="lib/ngCordova/dist/ng-cordova.min.js"></script> 
    <script src="cordova.js"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script src="js/angular-animate.js"></script> 
    <!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> --> 
    <script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script> 
    <link href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css" rel="stylesheet"> 
    <script type="text/javascript" charset="utf-8" src="plugins/org.apache.cordova.file/www/File.js"></script> 
    <script type="text/javascript" charset="utf-8" src="plugins/org.apache.cordova.file-transfer/www/FileTransfer.js"></script> 
    <!-- your app's js --> 
    <script src="js/config.js"></script> 
    <script src="js/app.js"></script> 

    <!--<script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script> --> 
    <script src="js/controllers.js"></script> 
    <script src="js/loginCtrl.js"></script> 
    <script src="js/registerCtrl.js"></script> 
    <script src="js/slideCtrl.js"></script> 
    <script src="js/detailCtrl.js"></script> 
    <script src="js/homeCtrl.js"></script> 
    <script src="js/verificationCtrl.js"></script> 
    <script src="js/paymentCtrl.js"></script> 
    <script src="js/orderpaymentCtrl.js"></script> 



</head> 

<body ng-app="testapp"> 
    <ion-nav-view></ion-nav-view> 
</body> 

</html>

來源

2016-09-30 Albert

您是否在開發人員工具中檢查了控制檯？任何錯誤？ –

是的，但在控制檯中沒有錯誤。 – Albert

您在哪個頁面上遇到此問題？驗證？ –

使用離子運行的Android --livereload --consolelogs 它會顯示詳細的控制檯輸出或問題造成白屏。無論如何，在離子博客上有一篇文章，介紹更多關於應用程序調試的內容 http://blog.ionic.io/angularjs-console/

來源

2016-09-30 10:33:07

基於離子框架的移動應用導航中顯示的空白頁

回答

相關問題