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>