0

This is my first experience in ionic framework based mobile app.my problem is a white blank page show in testing my app in android device.but it worked fine in browser.The workflow of my app is first login,then it redirect to homepage.homepage contain some icons for my service.after clicking each service it redirect to detail page.when redirect to detail page not showing my content only white blank page will display.some times this error is not showing.And another problem is after register it redirect to home page again the same issue occur.i cant understand how this happen.and browser console not showing any error.MY index.html and app.js is given below.

.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 r@khi

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

My 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>
Albert
  • 316
  • 3
  • 15

1 Answers1

0

use ionic run android --livereload --consolelogs it will show detailed console outputs or problem that cause white screen. anyway there is a post on ionic blog that describes more about app debugging http://blog.ionic.io/angularjs-console/

milad mohajer
  • 3
  • 3