Hello people, Its my first app and I got a white screen once I tried to run my app on my phone. The app its working without issues on chrome and it doesn’t say anything on the console.Hello people, Its my first app and I got a white screen once I tried to run my app on my phone samsung s4. The app its working without issues on chrome and it doesn’t say anything on console. I run the app on my phone with “ionic run -l -c” and there is no error also. Can someone help me please.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<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="//www.parsecdn.com/js/parse-1.6.12.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane ng-controller="myCtrl">
<ion-header-bar class="bar-dark">
<button class="button button-clear icon ion-minus-circled" ng-click="delete = ! delete; reorder = false;"></button>
<h1 class="title">Friends List</h1>
<button class="button button-clear icon ion-arrow-move" ng-click="reorder = !reorder; delete = false"></button>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="searchText"/>
</label>
<button class="button button-clear button-assertive icon ion-plus-circled" ng-click="showAddPopup()"></button>
</div>
<ion-content class="has-subheader">
<ion-refresher pulling-text="Reload..."
on-refresh="dorefresh()"></ion-refresher>
<ion-list class="list" show-reorder="reorder" show-delete="delete" can-swipe="true">
<ion-item class="item item-thumbnail-right" ng-repeat="element in data | filter: {personName: searchText}">
<img ng-src="{{ element.personDisplayPicture }}"/>
<h2>{{ element.personName }}</h2>
<p>{{ element.personContact }}</p>
<p>{{ element.personEmail}}</p>
<ion-reorder-button class="ion-arrow-move" on-reorder="moveItem(element, $fromIndex, $toIndex)"></ion-reorder-button>
<ion-delete-button class="ion-minus-circled" ng-click="onDelete(element)"></ion-delete-button>
<ion-option-button class="button-assertive icon ion-edit" ng-click='showEditPopup(element)'/>
</ion-item>
<!--
<ion-item class="item item-thumbnail-right" ng-repeat="element in data | filter: {personName: searchText}">
<div class="item item-thumbnail-left">
<img src="http://lorempixel.com/62/62"/>
<h2>Marilou Chartrand-Calve</h2>
<p>Status - Married</p>
<p>Phone - 888 888 8888</p>
</div>
<div class="item item-avatar">
<img src="http://lorempixel.com/62/62"/>
<h2>Marilou Chartrand-Calve</h2>
<p>Status - Married</p>
<p>Phone - 888 888 8888</p>
</div>
-->
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(true);
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('myCtrl', function($scope, $http, $ionicPopup, $ionicLoading) {
var fetchData = function() {
Parse.initialize("2xOcGOjU1z4EdNhBhFbzC0LzxvnW8BwHWNzeiRc9", "9KDeSjznYhp7UEXIupi4RawlP8qiw0dZZZ2BjM3h");
var query = new Parse.Query('friendslist');
$ionicLoading.show({
template: '<ion-spinner class="spinner-assertive" icon="spiral"></ion-spinner>'
});
query.find({
success: function(results) {
var temp = JSON.parse(JSON.stringify(results));
$scope.data = temp;
$scope.searchText = '';
$scope.$apply();
$ionicLoading.hide();
console.log(temp);
$scope.dorefresh = function() {
fetchData();
$scope.searchText = '';
$scope.$apply();
$scope.$broadcast('scroll.refreshComplete');
/* var query = new Parse.Query('friendslist');
query.find({
success: function(results){
var temp = JSON.parse(JSON.stringify(results));
$scope.data = temp;
$scope.searchText = '';
$scope.$apply();
$scope.$broadcast('scroll.refreshComplete');
console.log(temp);
},
error: function(object, error){
console.log(error);
}
})*/
}
$scope.onDelete = function(item) {
var friend = Parse.Object.extend('friendslist');
var query = new Parse.Query(friend);
query.get(item.objectId, {
success: function(results) {
results.destroy();
$ionicPopup.alert({
title: 'Friend Deleted',
template: '<center>Friend has been succesfully deleted from the list</center>'
});
fetchData();
$scope.$apply();
},
error: function(obj, err) {
console.log(err);
}
});
//$scope.data.splice($scope.data.indexOf(item),1);
}
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.data.splice(fromIndex, 1);
$scope.data.splice(toIndex, 0, item);
}
$scope.showEditPopup = function(item) {
$scope.edit = {};
$scope.edit.personName = item.personName;
$scope.edit.personContact = item.personContact;
$scope.edit.personEmail = item.personEmail;
$scope.edit.personDisplayPicture = item.personDisplayPicture;
var myPopup = $ionicPopup.show({
template: '<input type="text" placeholder="Name" ng-model="edit.personName"/><br/><input type="text" placeholder="Phone" ng-model="edit.personContact"/><br/><input type="text" placeholder="Email" ng-model="edit.personEmail"/><br/><input type="text" placeholder="Display Picture URL" ng-model="edit.personDisplayPicture"/><br/>',
title: 'Edit Friend',
subtitle: '',
scope: $scope,
buttons: [{
text: 'Cancel'
}, {
text: 'Save',
type: 'button-assertive',
onTap: function(e) {
//code to update on parse.com
var friend = Parse.Object.extend('friendslist');
var query = new Parse.Query(friend);
query.get(item.objectId, {
success: function(results) {
results.set('personName', $scope.edit.personName);
results.set('personContact', $scope.edit.personContact);
results.set('personEmail', $scope.edit.personEmail);
results.set('personDisplayPicture', $scope.edit.personDisplayPicture);
results.save({
success: function(results) {
$ionicPopup.alert({
title: 'Friend Saved',
template: '<center>Friend has been succesfully apdated.</center>'
});
fetchData();
$scope.$apply();
}
});
//Refresh data
/*$ionicPopup.alert({title:'Friend Saved', template: '<center>Friend has been succesfully apdated.</center>'});
fetchData();
$scope.$apply();*/
},
error: function(obj, err) {
console.log(err);
}
});
}
}]
});
}
$scope.new = {};
$scope.showAddPopup = function() {
var myPopup = $ionicPopup.show({
template: '<input type="text" placeholder="Name" ng-model="new.personName"/><br/><input type="text" placeholder="Phone" ng-model="new.personContact"/><br/><input type="text" placeholder="Email" ng-model="new.personEmail"/><br/><input type="text" placeholder="Display Picture URL" ng-model="new.personDisplayPicture"/><br/>',
title: 'Enter Details',
subtitles: '',
scope: $scope,
buttons: [{
text: 'Cancel'
}, {
text: 'OK',
type: 'button-assertive',
onTap: function(e) {
//alert("New Friend Saved to parse.com");
var newFriend = Parse.Object.extend('friendslist');
var friend = new newFriend();
friend.save({
personName: $scope.new.personName,
personEmail: $scope.new.personEmail,
personContact: $scope.new.personContact,
personDisplayPicture: $scope.new.personDisplayPicture
}).then(function(object) {
$ionicPopup.alert({
title: 'Friend Added',
template: 'Friend has been successfully added to the list.'
});
fetchData();
})
}
}]
})
}
},
error: function(object, error) {
console.log(error);
}
})
}
fetchData();
//$http.get('js/addressbook.json').success(function(data) {
//$scope.data = data;
//$scope.searchText = '';
//})
})
config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.appfriendslist248805" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>appFriendsList</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="you@example.com" href="http://example.com.com/">
Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="http://*/*"/>
<allow-intent href="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
</widget>
