I have this weird error in a Cordova/AngularJS app.
Sometimes (rarely) AngularJS cannot find the controller and chrashes, leaving users with a half-loaded unresponsive view.
The error only seems to happen when the phone has been locked for some time and is next to impossible for me to recreate at a regular basis. It just happens sometimes.
When the user close the app and restart it everything works fine again.
Thus far I have only received complaints about this error for Android devices and not for iOS devices.
EDIT: I have also now seen the error on iOS devices.
I really hope someone is able to shed light on this issue.
My index.html looks like this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="guideApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; script-src * 'self' 'unsafe-eval' 'unsafe-inline' https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js http://connect.facebook.net/en_GB/sdk.js;">
<link rel="stylesheet" href="css/snap.css" />
<link rel='stylesheet' href='css/mapbox.css' />
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/guideapp.css" />
<link rel="stylesheet" href="css/xpengineicons.css" />
<!--<link rel="stylesheet" href="css/guideappTest.css" />-->
<title></title>
<link rel="icon" type="image/png" href="img/favicon.png"/>
<meta name="application-name" content="GuideApp"/>
<meta name="msapplication-TileColor" content="#000000" />
<meta name="msapplication-TileImage" content="img/favicons/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="img/favicons/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="img/favicons/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="img/favicons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="img/favicons/mstile-310x310.png" />
</head>
<body ng-controller="globalCtrl" data-snap-ignore="true">
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left sideMenu">
{{::langPack.startPage[lang]}}
{{::langPack.selectTour[lang]}}
{{::langPack.map[lang]}}
{{::langPack.news[lang]}}
{{::langPack.photoMenu[lang]}}<i class="icon-angle-down fotoToggleAngle"></i>
<div class="fotoMenu" id="fotoMenu">
{{::langPack.followAnothersTour[lang]}}
{{::langPack.endPhototour[lang]}}
{{::langPack.seePreviousTour[lang]}}
<!--{{::langPack.photoFromGallery[lang]}}-->
{{::langPack.selectFromGallery[lang]}}
<!--[Smaller radius]-->
<!--[Larger radius]-->
<!--[{{langPack.toggleActionRadius[lang]}}]-->
<!--[End waypoint tour] -->
</div>
{{::langPack.about[lang]}}
<a href="#" ng-click="sync.checkUpdates();">
{{::langPack.sync[lang]}}
<span id="updateCheck" class="updateCheck"><div class="circle"></div>{{::langPack.checkForUpdates[lang]}}</span>
<span id="uptodate" class="updateCheck uptodate"><i class="icon-ok"></i>{{::langPack.upToDate[lang]}}</span>
</a>
{{::langPack.showIntroOverlay[lang]}}
</div>
</div>
<div id="content" class="snap-content content" ng-style="customBg">
<nav id="header" ng-controller="cameraCtrl">
<img src="img/menu-regular.svg"><!--<div class="menuNotification" ng-if="photosInUploadQue > 0">{{photosInUploadQue}}</div>-->
<i class="icon-angle-up"></i>
<h1></h1>
<img ng-src="{{customLogo}}" id="logo">
<!-- Kamera når det virker -->
<i class="icon-camera"></i>
<!-- <i class="icon-angle-down"></i> -->
<!-- <i class="icon-angle-up"></i> -->
<!-- <a onclick = "window.open('http://guideapp.tmts.dk/', '_blank', 'location=yes'); return false;" id="viewInBrowser" class="uploadBtn"><i class="icon-angle-down"></i></a> -->
<div id="uploadPopupOverlay" class="popupOverlay" ng-click="closeUploadPopup();"></div>
<section id="uploadPopup">
<p>{{::langPack.uploadAndShare[lang]}}</p>
<form novalidate ng-submit="uploadPhotosSubmittedByPopup($event)">
<label for="emailInput" ng-show="showEmail === true">
{{::langPack.yourEmail[lang]}}
<div class="error" ng-if="emailMsg">{{::emailMsg}}</div>
</label>
<input type="email" value="{{emailAdress}}" required name="emailInput" ng-model="emailAdress" ng-show="showEmail === true" id="emailAdress">
<label for="titleInput">
{{::langPack.yourTitel[lang]}}
<div class="error" ng-if="titleMsg">{{::titleMsg}}</div>
</label>
<input type="text" value="{{tourTitle}}" name="titleInput" ng-model="tourTitle" id="uploadTitle" required>
<p class="emailExists" ng-show="showEmail === false"><span compile="langPack.sendTo[lang]"></span> [{{::langPack.editEmail[lang]}}]</p>
<button class="btn left" ng-click="closeUploadPopup();">{{::langPack.cancel[lang]}}</button>
<button type="submit" class="btn right">{{::langPack.ok[lang]}}</button>
</form>
</section>
</nav>
<div class="slideInLeft" ng-view></div>
</div>
<aside ng-class="{active: showIntro}" id="intro" ng-swipe-left="nextSlide()" class="" ng-swipe-right="prevSlide()">
<div>
<div id="introSwipe">
<section id="intro{{$index+1}}" class="introSlide" ng-class="{'active': $index === 0}" ng-repeat="slide in introSlides" style="background-image: url('{{slide}}')"></section>
</div>
<section id="noShow">
<div class="slideNavigation">
<button ng-click="prevSlide()" ng-class="{disabled: firstSlide}">{{::langPack.prevSlide[lang]}}</button>
<div class="slideProgress">{{slideProgress}}/{{introSlides.length}}</div>
<button ng-click="nextSlide()" ng-class="{disabled: lastSlide}">{{::langPack.nextSlide[lang]}}</button>
</div>
</section>
</div>
<a id="closeIntro" href="#" ng-click="toggleIntro(); $event.preventDefault()">{{::langPack.toggleIntroText[lang]}}</a>
</aside>
<section id="confirmOverlay" class="popupOverlay" ng-click="confirmValue = false;">
<section class="checkPopup confirmPopup" id="confirmPopup">
<p id="confirmMessage"></p>
<button class="btn right" ng-click="confirmValue = true;">{{::langPack.ok[lang]}}</button>
<button class="btn left" ng-click="confirmValue = false;">{{::langPack.cancel[lang]}}</button>
</section>
</section>
<section id="spinnerOverlay" class="popupOverlay">
<section class="checkPopup spinnerPopup" id="spinnerPopup">
<div class="circle"></div>
<div class="spinnerText" id="spinnerText"></div>
</section>
</section>
<section id="statusOverlay" class="popupOverlay" ng-click="status.hide()">
<section class="checkPopup statusPopup" id="statusPopup">
<p id="statusText"></p>
<button class="btn" ng-click="status.hide()">Ok</button>
</section>
</section>
<!-- JavaScript libraries -->
<script src="cordova.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-locale_da-dk.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-animate.min.js"></script>
<script src="js/libs/angular-touch.min.js"></script>
<script src="js/libs/snap.min.js"></script>
<script src="js/libs/md5.js"></script>
<script src="js/libs/angular-listview.min.js"></script>
<!-- Mapbox -->
<!--<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>-->
<!-- <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> Draw GPX 20151014 -->
<!-- leaflet -->
<script src="js/libs/leaflet.js"></script>
<script src='js/libs/leaflet-omnivore.min.js'></script> <!-- Draw GPX 20151014 -->
<script src='js/libs/leaflet-tilelayer-cordova.js'></script> <!-- Offline maps -->
<!-- Custom script files -->
<script src="js/app.js"></script>
<script src="js/index.js"></script>
<!-- included controllers -->
<script src="controllers/globalCtrl.js"></script>
<script src="controllers/homeCtrl.js"></script>
<script src="controllers/aboutCtrl.js"></script>
<script src="controllers/tourSelectCtrl.js"></script>
<script src="controllers/mapCtrl.js"></script>
<script src="controllers/cameraCtrl.js"></script>
<script src="controllers/viewtoursCtrl.js"></script>
<script src="controllers/commonToursCtrl.js"></script>
<script src="controllers/highscoreCtrl.js"></script>
<script src="controllers/downloadCtrl.js"></script>
<script src="controllers/waypointCtrl.js"></script>
<script src="controllers/waypointGalleryCtrl.js"></script>
<script src="controllers/endCtrl.js"></script>
<script src="controllers/newsCtrl.js"></script>
</body>
</html>
AngularJS is loaded with app.js:
// Init angular.js
var guideApp = angular.module('guideApp', ['ngRoute', 'ngAnimate', 'ngTouch']);
guideApp.config(['$routeProvider', '$compileProvider', function ($routeProvider, $compileProvider) {
$routeProvider.when('/', {
controller: 'homeCtrl',
templateUrl: 'views/home.html'
}).when('/home', {
controller: 'homeCtrl',
templateUrl: 'views/home.html'
}).when('/tourSelect', {
controller: 'tourSelectCtrl',
templateUrl: 'views/tourSelect.html'
}).when('/map', {
controller: 'mapCtrl',
templateUrl: 'views/map.html'
}).when('/about', {
controller: 'aboutCtrl',
templateUrl: 'views/about.html'
}).when('/viewtours', {
controller: 'viewtoursCtrl',
templateUrl: 'views/viewtours.html'
}).when('/commonTours', {
controller: 'commonToursCtrl',
templateUrl: 'views/commonTours.html'
}).when('/highscore', {
controller: 'highscoreCtrl',
templateUrl: 'views/highscore.html'
}).when('/download', {
controller: 'downloadCtrl',
templateUrl: 'views/download.html'
}).when('/waypoint', {
controller: 'waypointCtrl',
templateUrl: 'views/waypoint.html'
}).when('/waypointGallery', {
controller: 'waypointGalleryCtrl',
templateUrl: 'views/waypointGallery.html'
}).when('/end', {
controller: 'endCtrl',
templateUrl: 'views/end.html'
}).when('/news', {
controller: 'newsCtrl',
templateUrl: 'views/news.html'
}).otherwise({
redirectTo: '/'
});
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|cdvfile|file):/);
}]);
guideApp.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
}])
// custom on touchstart directive
/*guideApp.directive('guideappTouchstart', [function () {
return function(scope, element, attr) {
element.on('touchstart', function (event) {
scope.$apply(function () {
scope.$eval(attr.guideappTouchstart);
});
});
};
}]);*/
The index.js file looks like this:
var http,
app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
if (!window.cordova) {
this.onDeviceReady();
} else {
document.addEventListener('deviceready', this.onDeviceReady, false);
}
},
onDeviceReady: function () {
app.receivedEvent('deviceready');
console.log('Device ready');
if (window.cordova) {
// find and set the filesystem root
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(1, 0, function (fileSystem) {
console.log("got filesystem: "+fileSystem.name); // displays "persistent"
//console.log(fileSystem.root.fullPath); // displays "/"
window.rootFS = fileSystem.root;
});
}
},
receivedEvent: function (id) {
//angularInit();
this.platform();
},
server: function (wwwroot) {
if (httpd) {
httpd.getURL(function (url) {
if(url.length > 0) {
document.getElementById('url').innerHTML = "server is up: <a href='" + url + "' target='_blank'>" + url + "</a>";
} else {
httpd.startServer({
'www_root' : wwwroot,
'port' : 8080
}, function (url) {
//updateStatus();
}, function (error) {
console.log('server error ', error);
});
}
}, function () {});
} else {
console.log('CorHttpd plugin not available/ready');
}
},
platform: function () {
var deviceType;
if (navigator.userAgent.match(/Android/i)) { // Android
if (navigator.userAgent.match(/Mobile/i)) { // Android smartphone
console.log('Android smartphone');
deviceType = 'mobile';
} else { // Android tablets
//console.log('Android tablet');
deviceType = 'tablet';
}
} else if (navigator.userAgent.match(/iPad/i)) { // IOS ipad
//console.log('IOS tablet');
deviceType = 'tablet';
} else if (navigator.userAgent.match(/iPhone/i)) { //IOS smartphone
//console.log('IOS smartphone');
deviceType = 'mobile';
} else { // Dekstop as default
//console.log('desktop');
deviceType = 'tablet';
}
}
};
app.initialize();
Related
Here is the code
App.js
(...)
.state('app.dishdetails', {
url: '/menu/:id',
views: {
'mainContent': {
templateUrl: 'templates/dishdetail.html',
controller: 'DishDetailController'
}
}
});
Controller.js
.controller('DishDetailController', ['$scope', '$stateParams', 'menuFactory', 'favoriteFactory', 'baseURL','$ionicPopover', '$ionicListDelegate', '$ionicModal', function($scope, $stateParams, menuFactory, favoriteFactory, baseURL, $ionicPopover, $ionicListDelegate, $ionicModal) {
$scope.addFavoriteMenu = function(index){
console.log("index is " + index);
};
// .fromTemplateUrl() method
$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
}])
Main HTML
<ion-view view-title="Dish Details">
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
<ion-content>
(...)
</ion-content>
</ion-view>
Popover HTML
<ion-popover-view>
<ion-content>
<ul class="list">
<li class="item" ng-click="addFavoriteMenu({{dish.id}})">
Add to Favorites
</li>
</ul>
</ion-content>
db.json
"dishes": [
{"id": 0};
{"id": 1};
{"id": 2};
]
I can't get the parameter in the "addFavoriteMenu({{dish.id}})" in the controller.js, it always come out as undefined
but, when I try to inspect using Google Chrome, the ID could display properly in [ion-popover-view]
Is there any mistake that I create on here? or anything?
Trying to reproduce your issue I noticed that your JSON is wrong: there are semicolons (;) at the end of each line instead of colons (,).
Howevere here is a working snippet:
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicPopover) {
$scope.dishes = [
{"id": 0},
{"id": 1},
{"id": 2}
];
$scope.addFavoriteMenu = function(index) {
console.log(index);
alert("index is "+index);
}
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Popover</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="platform-ios" ng-controller="AppCtrl">
<div class="bar bar-header bar-positive">
<h1 class="title">Popover</h1>
<div class="buttons">
<button class="button button-icon ion-more" ng-click="popover.show($event)">
</button>
</div>
</div>
<ion-content class="padding has-header">
Click the more info icon in the top right. In an actual app the platform style will automatically be set.
</ion-content>
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<ul class="list">
<li ng-repeat="dish in dishes" class="item" ng-click="addFavoriteMenu({{dish.id}})">
Add to Favorites {{dish.id}}
</li>
</ul>
</ion-content>
</ion-popover-view>
</script>
</body>
</html>
I have a item-list and I mark some of them .
When i close app and open it aggain , marks removed .
Please help me to save and load app
list.html
<ion-view class="text-center bfont" view-title="کافی شاپ">
<ion-nav-buttons side="left">
<button class="button button-icon ion-help-circled" ng-click="openModal()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon ion-gear-a" ng-click()="openModal()"></button>
</ion-nav-buttons>
<div class="bar bar-subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" class="text-right" ng-model="query" placeholder="جست و جو">
</label>
</div>
<ion-content class="has-subheader">
<ion-list>
<ion-item ng-class="{'star':item.star}" ng-repeat='item in artists | filter: query' class="item-thumbnail-right item-icon-left item-text-wrap" href="#/tab/list/{{item.shortname}}">
<img ng-src="img/img/{{item.shortname}}.jpg" alt="{{item.name}} Photo">
<h3 class="text-right bfont">{{item.name}}</h3>
<p class="bfont" style="direction:rtl; text-align:justify">{{item.shortbio | limitTo: 100}}
{{ item.shortbio.length > 150 ? '…' : '' }}</p>
<button class="button button-clear icon ion-star button-assertive"
ng-click="toggleStar(item)"
ng-show="item.star"></button>
<ion-option-button class="button-assertive"
ng-click="toggleStar(item)">
<i class="icon ion-star"></i>
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
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'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
templateUrl: 'templates/home.html'
}
}
})
.state('tabs.list', {
url: '/list',
views: {
'list-tab': {
templateUrl: 'templates/list.html',
controller: 'ListController'
}
}
})
.state('tabs.detail', {
url: '/list/:aId',
views: {
'list-tab': {
templateUrl: 'templates/detail.html',
controller: 'ListController'
}
}
})
$urlRouterProvider.otherwise('tab/home');
})
.controller('AppCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('templates/help.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
})
.controller('ListController', ['$scope', '$http', '$state',
function($scope, $http, $state) {
$http.get('js/data.json').success(function(data){
$scope.artists = data;
$scope.whichartist = $state.params.aId;
$scope.toggleStar = function(item) {
item.star = !item.star;
}
});
}]);
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">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font.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="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-energized bfont">
<ion-nav-back-button class="bfont">بازگشت </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
tabs.html
<ion-tabs class="tabs-icon-top tabs-energized bfont">
<ion-tab title="خانه" icon="ion-home"
href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab class="text-center" title="کافی شاپ" icon="ion-coffee" href="#/tab/list">
<ion-nav-view name="list-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
i mark a item and when i close app item unmarked , my item in JSON file
please help me to save marks .
I am using phonegap geolocation API in my phonegap android application.It always shows error code code 3,Timeout error.I am also try to change timeout variable value to increased,enableHighAccuracy to be true.But no change in result.But it will works on browser not runs in application.Give me the solution for this problem.
This is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/contact.css" type='text/css' />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"
type='text/css' />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJAbwOQjaVjDy9XJ0UEZCvTdZeW_atXak&sensor=false">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.9.0.js"></script>
<script src="jquery.mobile/jquery-1.10.2.min" type='text/javascript'></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
$(document).on("mobileinit", function() {
$.mobile.phonegapNavigationEnabled = true;
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.loadingMessageTextVisible = true;
$.mobile.pageLoadErrorMessage;
});
$(document).ready(function() {
$('#Login').show();
$('#Contacts').hide();
});
function success(name) {
alert(name);
}
function error() {
alert("error");
}
function login() {
var name = $("#name").val();
if (navigator.notification) {
navigator.notification.alert("Welcome " + name, alertDismissed, 'Sample App', 'Ok');
} else {
alert("Welcome " + name);
}
var options = {
enableHighAccuracy: true,
timeout: 8000,
maximumAge: 10000
};
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
$("#Login").hide();
$("#Contacts").show();
}
function alertDismissed() {
console.log("ok");
}
function onSuccess(position) {
var latt1 = position.coords.latitude;
var lont1 = position.coords.longitude; //alert(latt1+" "+lont1);
var myLatlng1 = new google.maps.LatLng(latt1, lont1);
var mapOptions1 = {
center: myLatlng1,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions1);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: "You are here! (at least within a " + position.coords.accuracy + " meter radius)"
});
var circle = new google.maps.Circle({
radius: 26000,
strokeColor: "#00FF00",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#C0C0C0",
fillOpacity: 0.35,
map: map
});
marker1.setIcon("./images/blue_dot_circle.png");
marker1.setMap(map);
}
function onError(error) {
if (navigator.notification) {
navigator.notification.alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n', alertDismissed, 'Sample App', 'Ok');
} else {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
}
function AlertConfirmed(buttonIndex) {
if (buttonIndex == 1) {
device.exitApp();
console.log(buttonIndex);
} else {
console.log(buttonIndex);
}
}
function goHome() {
navigator.app.loadUrl("http://www.google.co.in", {
openExternal: true
});
}
</script>
<script src="jquery.mobile/jquery.mobile-1.3.1.min.js"
type='text/javascript'></script>
</head>
<body>
<div data-role="page" >
<div id="Login">
<div data-role="header" data-position="fixed" data-theme="b"
data-tap-toggle="false" class="header" data-transition="none"
id="myFixedHeader">
<p>Sample Application</p>
</div>
<div data-role="content">
<div id="title">
<div
style="width: 90%; padding-left: 5%; padding-right: 5%; padding-top: 3%; padding-bottom: 1%;">
<input type="text" name="password" id="name" data-mini="true"
placeholder="Enter Your Name " value="" data-inline="true">
</div>
<center>
<div id="log" onclick="login()">Login</div>
</center>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed"
class="footer" data-transition="none" data-tap-toggle="false">
<p onclick="goHome()">© 2014
Sample App Reserved, LLC.</p>>
</div>
</div>
<div id="Contacts">
<div data-role="header" data-theme="b" data-tap-toggle="false"
data-position="fixed" class="header" data-transition="none">
<h3 id="htitle">Home Page</h3>
</div>
<div data-role="content" id="map_canvas" >
</div>
<div data-role="footer" data-theme="b" data-position="fixed"
class="footer" data-transition="none" data-tap-toggle="false">
<p onclick="goHome()">© 2014
Sample App Reserved, LLC.</p>
</div>
</div>
</body>
</html>
I have added Permissions INTERNET,FINE_LOCATION,COARSE_LOCATION in manifest file
and corrova 2.9.0.js
Please make sure that you have <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> set in your android manifest.
I made one mistake in config.xml.Now,I have added
<access origin="*"/>
<access origin="*://*.googleapis.com/*" subdomains="true" />
<access origin="*://*.gstatic.com/*" subdomains="true" />
<access origin="*://*.google.com/*" subdomains="true" />
<access origin="*://*.googleusercontent.com/*" subdomains="true" />
in my config.xml file.googlemap geolocation showed successfully
Make entry in app/res/xml/config.xml
Entry:
And in app/AndroidManifest.xml
Entry:
Also make sure that the enablehighAccuracy parameter is set to true.
Cheers!!
I am trying to get ng-views to work in android phoneapp app. I get the following
error when I trying to navigate to one of the views via hyperlink.
"Origin is not allowed by Access-Control-Allow-Origin"
I have tried modifying the the cordova,xml in the res folder with no luck.
From
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
To
<access origin="*"/>
Any advice is appreciated, below is the code.
Thanks.
HTML:
<html ng-app="AngApp">
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="angular.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
// The message from the service is appearing, so Angular seems
// to be working fine without having to bootstrap it.
//angular.bootstrap(document, ['AngApp']);
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Angular App</h2><br/>
View1
View2
<hr/>
<div data-ng-controller="MainCtrl">
<p>{{Message}}</p>
<input type="text" data-ng-model="Message"/>
</div>
<hr/>
<div data-ng-view></div>
</body>
</html>
APP.JS:
var angApp = angular.module('AngApp',[]);
angApp.config(function ($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
angApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: TestCtrl1,
templateUrl: 'view1.html'
})
.when('/view', {
controller: TestCtrl2,
templateUrl: 'view2.html'
});
});
angApp.factory('myService',function(){
return 'I am a service';
});
function MainCtrl($scope, myService){
$scope.Message = 'This is the main controller. '+ myService;
}
function TestCtrl1($scope){
$scope.Message = 'This is controller 1.';
}
function TestCtrl2($scope){
$scope.Message = 'This is controller 2.';
}
You are missing a # sign there in href="#/view".
Javascript does not work outside index.html page:
Project Test 1:
Index.html (with GEOLOCATION PAGE CODE) works fine
Project Test 2:
Index.html (with MENU PAGE CODE)
Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work
The page Geolocation.html opens up, but javascript does not run.
What am i missing?
GEOLOCATION PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Ready...';
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });
}
function onSuccess(position) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Success...';
initialize(position.coords.latitude, position.coords.longitude);
}
function onError(error) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Error...';
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function initialize(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function onBodyLoad(){
alert("test!");
}
</script>
</head>
<body>
<h2>Location</h2>
<p id="geolocation">Finding geolocation...</p>
<p id="geoTemp"></p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
MENU PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="pageMain">
<div data-role="header">
<h1>
TestPage
</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="geolocation.html" data-transition="slide">
<h2>Geolocation Test</h2>
<p>Testing</p>
</a></li>
</ul>
</div>
</div>
</body>
</html>
I have also tried to add an onload function to the body tag and call a test function but it didn't work either.
In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.