Ionic view displaying grey screen v1


#1

I swear this problem is common. I don’t know how to get my ionic app to show on my iphone. It works perfectly fine on ionic serve. I looked everywhere to get help, and it’s still showing me this grey screen.

app.js

var HCapp = angular.module('HCapp',['ionic','ui.router']);

HCapp.config(['$stateProvider','$urlRouterProvider', function($stateProvider, 
$urlRouterProvider){
$stateProvider
 .state('signup', {  
url: '/signup', 
templateUrl: 'views/signup.html'
})

   .state('register',{
url:'/register',
templateUrl: 'views/register.html'
})

    .state('sign-in', {
url:'/sign-in',
templateUrl: 'views/sign-in.html'
  })
 $urlRouterProvider.otherwise('/signup');
 }]);

  HCapp.controller('signCntrl', ['$scope', '$http','$location', function ($scope, $http, 
  $location ){

  $scope.users= {};

   $scope.save = function(){
   // $http.post('http://localhost:3000/sign-in/save', $scope.users)
   $https.post('https://jsc-reactr.fwd.wf/sign-in/save', $scope.users)
   .success(function(response){
   console.log(response);

     $location.path('/home');
    })
   .error(function(response){
   console.log(response);
   });
   }
  }]);

    HCapp.controller('registerCntrl', ['$scope', '$http', '$location',  function ($scope, $http, $location ){

    $scope.save = function(){
   // $http.post('http://localhost:3000/register/save', $scope.register)
   $https.post('https://jsc-reactr.fwd.wf/register/save', $scope.register)
   .success(function(response){
    console.log(response);
   $location.path('/questions');
    })
    .error(function(response){
    console.log(response);
   });
   }
    }]);

html using in each html page

<ion-view>
<div id="signin" ng-controller="signCntrl">
 <a class="button icon-left ion-chevron-left button-clear button-light" a href="#/signup"></a>
  <h1 class="hidden">Sign In</h1>
  <img src="../img/logo.png" alt=logo id="logo">

    <div id="footer">
    <div class="imageHolder">
    <img src="../img/email.png" alt=mail id="emailIcon">
     <img src="../img/key.png" alt="key" id="keyIcon">
       </div>

        <div class="list list-inset" id="form">
        <form class="signIn">        
        <label class="item item-input"> 
        <input type="email" placeholder="Email" ng-model="users.username">
        </label>
        <label class="item item-input" id="passform"> 
          <input type="password" placeholder="Password" ng-model="users.password">
       </label>
        <div> 
       <input type="submit" value="SIGN IN" ng-click="save()" button class="button" id="submitbutton">

     </div>
    </form>
      </div>
    </div>
     </div>
    </ion-view>

index.html

       <!DOCTYPE html>
      <html data-ng-app="HCapp">
     <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="https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C500%2C700" rel="stylesheet">

<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>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js">
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.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>

  </head>
   <body> 

//took out ui-view because i heard their was alot of issues

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

#2

What did you do to debug yet?

Did you remote debug the app on your iPhone? Check https://ionic.zone/debug/remote-debug-your-app#ios for instructions, then look at the console and network tabs for errors.