I am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:
index.html
<!DOCTYPE html>
<html ng-app="main-app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
<div class="loader-ajax" ng-show="isViewLoading"></div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
main.js
var mobileApp = angular.module("main-app", []);
mobileApp.config(function ($routeProvider,$compileProvider) {
$routeProvider
.when("/",
{
templateUrl: "partial/home.html",
controller: "homeController"
})
.when("/home",
{
templateUrl: "partial/home.html",
controller: "homeController"
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
alert('Coming here');
$scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
alert('Home Coming here');
});
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
angular.bootstrap(document, ['main-app']);
},
report: function(id) {
console.log("report:" + id);
}
};
When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.
From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.
I had the same problem, which I just found a solution to. Take a look at Angular ng-view/routing not working in PhoneGap
Move app.initialize(); to PhoneGap's deviceready event
I had this problem - I was stuck on it for 3 evenings - eventually I compared the template names in the routing to the actual file names - make sure the case matches.
Related
I created a new Cordova 4.0 project, added android platform and added all the core plugins and the following is my index.html file.
<!DOCTYPE html> <html> <head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
alert("ready");
}
// Show a custom alert
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
'Game Over', // title
'Done' // buttonName
);
}
// Beep three times
//
function playBeep() {
navigator.notification.beep(3);
}
// Vibrate for 2 seconds
//
function vibrate() {
navigator.vibrate(2000);
}
</script> </head> <body>
<p>Show Alert</p>
<p>Play Beep</p>
<p>Vibrate</p> </body> </html>
But I could never see the device ready firing. Any ideas on what is wrong with the abive snippet ?
Try to change
<script type="text/javascript" charset="utf-8" src="/cordova.js"></script>
to
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
i am very new to this mobile dev field and i have a question that have been bothering me for days. i have look up the reference from here. below are the code that he/she used. but unfortunately, when i applied it to mine, the code doesnt work. is it because i access it wrong or there is anything else i missed.
function close_window() {
if (confirm("Exit?")) {
navigator.app.exitApp();
}
}
here is my html to acccess the script
<div>
<ul>
<li><a data-role="button" data-icon="delete" onclick="close_window();">Exit</a></li>
<ul>
</div>
hopefully my problem can be solved.thank you
Try this one, but i haven't test it, the source is from here
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function exitFromApp()
{
navigator.app.exitApp();
}
</script>
</head>
<body onload="onLoad();">
<button name="buttonClick" onclick="exitFromApp()">Click Me!</button>
</body>
</html>
I want to display json data from servlet in listview of android phonegap. But it is displaying blank page in android emulator. It is not calling servlet also. Here is my code please help me.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Auth Demo</title>
<link rel="stylesheet" href="jquery.mobile-1.3.2.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
<script>
$.ajax({
url: 'http://10.0.2.2:7080/example/CaseList',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i, item) {
$('ul').append('<li>' + item.case + '</li>');
});
$('#output').listview("refresh");
},
error: function(){
output.text('There was an error loading the data.');
}
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-filter="false" id="output" data-theme="d">
</ul>
</div>
</div>
</body>
</html>
I am not 100% up on ajax calls but I am pretty sure you need to actually call the function after you define it and it doesn't look like you are.
Try putting an onload call in your tag and then wrapping your ajax in a function.
Body tag:
<body onload="getData()">
Function:
function getData(){
//place your ajax call in here
}
I'm new to phonegap and android. I am trying to create a project which fetch pages/data from webserver but it is not working. The code i have used is shown below, facing problem in appending data from ajax call.
when application starts in emulator it shows the alert with all data fetched from local server but its not appending to #resultBlock
here's my code
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script>
function onDeviceReady() {
$('#resultBlock').html('Loading');
$.ajax({
url: 'http://192.168.1.2/user/welcome/',
success: function(data) {
$('#resultBlock').html(data);
alert(data);
}
});
}
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script>
</head>
<body >
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<h3>Result</h3>
<p id="resultBlock"></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks
hake sure the js files are included correctly and that the path is correct. then use
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://192.168.1.2/user/welcome/functions.php',
data: { get_param: 'candidates' },
dataType:'json',
success: function (data) {
$('#resultBlock').html(data);
alert(data);
},
error: function () {
console.log(XMLHttpRequest.errorThrown);
}
});
});
I've tried to setup Phonegap on Android and deviceready won't fire. The reason is that DeviceInfo.uuid is always null/undefined.
It seems like the non-javascript parts of phonegap isn't loaded correctly, but I can't see exactly what. For everything outside the www directory I'm using the code provided in the sample directory of the phonegap download.
Anyone know what may be causing this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="javascripts/phonegap-1.0.0.js"></script>
<script src="http://debug.phonegap.com/target/target-script-min.js#something"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
var initialize = function() {
window.console.log("deviceready||resume");
};
document.addEventListener("deviceready", initialize);
document.addEventListener("resume", initialize);
window.console.log("onBodyLoad!");
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Herro World</h1>
</body>
</html>
In case someone else stumble on this problem.
I hadn't realized that phonegap-1.0.0.js is different for the iPhone and Android version. It has the same name, but the content is different. Thus, one must load the correct file. I solved it like this:
<script type="text/javascript">
// Atrocious way of loading two diffent phonegap scripts, but other loading methods won't work.
// also there shouldn't be two scripts to begin with -- so much for cross-platform.
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.match(/android/)) {
document.write("<script type='text/javascript' src='javascripts\/phonegap-android-1.0.0.js'><\/script>");
} else {
document.write("<script type='text/javascript' src='javascripts\/phonegap-iphone-1.0.0.js'><\/script>");
}
</script>
If you want some function to execute when the device is ready do something like this
document.addEventListener("deviceready", onDeviceReady, true);
// PhoneGap is now ready
function onDeviceReady() {
// Write your code here
}
I am not sure why your code is not working.Try placing the document.addEventListener outside the scope of the function.