I've been working on an app using AngularJS. Now, I'm ready to take my app and bundle it up with Cordova. My issue is, I'm not sure how to handle the ondeviceready event. At this time, my app is setup like this:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', initializeApp(), false);
} else {
initializeApp();
}
</script>
</body>
</html>
app.js
function initializeApp() {
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function() {
...
});
myApp.run(function() {
...
});
}
I put the initialization in a function called initializeApp so I could reuse it. However, when I attempt to run this, I'm getting an error that says...
Uncaught ReferenceError: initializeApp is not defined
What am I doing wrong?
I'm not sure what your exact issue is, but I know the following piece of code is incorrect
Change
document.addEventListener('deviceready', initializeApp(), false);
To
document.addEventListener('deviceready', initializeApp, false);
By doing it the first way, you're trying to execute the function instantly.
Related
I am playing around with an html template and I have noticed that the developer doesn't use RequireJS or anything else to require and call different functions from other node files. Instead, they used this in the html file to initialise and call the function:
<script src="../../assets.js/test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
});
</script>
And I've got the below code in assets/js/test.js which defines initSomeFunction in javascript:
test = {
initSomeFunction: function() {
//Some code
}
initAnotherFunction: function() {
//More code
}
}
(It would be helpful if someone can tell me what this method is called so that I can research it more.)
My problem arises when I try to do the same thing in my node app in the home directory /main.js. The node app works fine on its own but when I add something like this:
test2 = {
initMyFunction: function() {
console.log("I finally decided to work! Good luck...");
}
}
and modify my html file like this:
<script src="../../main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
test2.initMyFunction();
});
</script>
then it won't work. Can someone please point me to the right direction as I don't even know what to Google. I am trying to avoid using RequireJS or anything else as I am a total beginner and the method that the developer used sounds so simple and tempting.
I wish this answer will help you:
I am using express, so I do this to solved your problem!
main.js file's position:
modify app.js add:
app.use(express.static(path.join(__dirname, '/')));
Then, in the view file:
<html>
<head>
<script src="public/javascripts/jquery-1.10.2.min.js"> </script>
<script src="main.js"></script>
</head>
<body>
<script>
$(function () {
//test.initSomeFunction();
test2.initMyFunction();
})
</script>
</body>
</html>
Open the chrome Developer Tools. You will see the result.
I've been banging my head against the wall, if anyone could help, that would be super appreciated!
Both my js files are in www/js. The cordova.js file was generated for me.
The "e" in body was just to make sure my new code was getting there. It is, I've changed the letter in dozens of builds while trying to get this to work, just to make sure, and it always changes.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="example.js"></script>
</head>
<body onload="onLoad()">
e
</body>
</html>
example.js
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
alert('yo');
document.addEventListener("volumedownbutton", onVolumeDown, false);
// Add similar listeners for other events
}
function onVolumeDown() {
alert('hey');
document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;">asdfs</div>';
}
cordova.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
When I fire up the app, I get no alerts, and volume down does nothing. This is what I get in the console when I build the apk
BUILD SUCCESSFUL
Total time: 4.479 secs
Built the following apk(s):
/root/hello/platforms/android/build/outputs/apk/android-debug.apk
root#0SfCordova:~/hello# cordova -v
6.3.1
Also, I installed node and cordova on a blank ubuntu 14.04 digital ocean box using just the command line. Where do I go to see console logs? Thanks! I have no idea how to debug in this environment.
Remove Onload event from html page.And don't write cordova.js file.Cordova will automatically create this file.You can use following code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="example.js"></script>
</head>
<body>
e
</body>
</html>
example.js
document.addEventListener('deviceready',onDeviceReady,false);
function onDeviceReady() {
alert('yo');
document.addEventListener("volumedownbutton", onVolumeDown, false);
// Add similar listeners for other events
}
function onVolumeDown() {
alert('hey');
}
i came across the same error, it could not work on the emulator. Here is the solution that worked for me that i think will also work for you. I am running the latest cordova 6.3.1 on my MAC OS 10.12.
i removed this line of code from my html files. I am still trying to understand why it worked after removing the below line.
I am working on an Android Cordova app where I want to programmatically open the soft keyboard when the page is loaded (keypad instead of regular keyboard).
There already is a plugin that should do exactly what I need
(Cordova Android Focus Plugin), but I can't get it to work as intended.
My code to Focus the Element 'Stunden' looks like this:
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
cordova.plugins.Focus.focus('Stunden');
}
</script>
.
.
.
<body onload="onLoad()">
When the code is executed on the device I get the following error:
Uncaught TypeError: Cannot read property 'Focus' of undefined
So I guess the code is executed before the Plugin is loaded completely, but I could not find another method than "deviceready" to wait for it.
Thanks for your help already!
After some fiddling I found out how to get it to work:
In the Android Focus Plugin Docs it says that you can set the focus on an element by calling the function
cordova.plugins.Focus.focus(element);
Replacing (element) with ("Stunden") breaks the function, instead defining a variable
element = document.getElementByID('Stunden')
does the trick. This might be really basic, but in case someone stumbles over this I will just leave it here.
The working code then looks like this
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var element = document.getElementById('Stunden')
cordova.plugins.Focus.focus(element);
}
</script>
.
.
.
<body onload="onLoad()">
I've decided to learn Angular.js after having learned JavaScript and jQuery and am finding the going a bit rough. Here's my code.
index.html:
<html>
<head>
<title>Resolute</title>
<script src="js/angular 1.3.0-beta9/angular.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body ng-app="resoluteApp">
<form novalidation ng-controller="resoluteCtrl" ng-submit="submit()">
<button type="submit">Submit</button>
</form>
</body>
</html>
index.js:
var app = angular.module('resoluteApp', []);
app.service('resoluteService', function myService() {
this.bar = function() { return 'resolute'; };
});
app.controller('resoluteCtrl', function($scope) {
$scope.submit = function() {
alert(resoluteService.bar()); // resoluteService is undefined here
};
});
I would like to be able to call the function bar() defined in the service resoluteService from within the ng-submit event handler $scope.submit(). Upon pressing the Submit button, I get the following error (Chrome 35.0.1916.153) in the console:
ReferenceError: resoluteService is not defined
at Scope.$scope.submit (http://localhost:8383/resolute/js/index.js:9:19)
at http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:10797:21
at http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:19791:17
at Scope.$eval (http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:12699:28)
at Scope.$apply (http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:12797:23)
at HTMLFormElement.<anonymous> (http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:19790:21)
at http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:2860:10
at forEach (http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:327:20)
at HTMLFormElement.eventHandler (http://localhost:8383/resolute/js/angular%201.3.0-beta9/angular.js:2859:5)
As I'm still trying to get my head wrapped around the Angular way of doing things, I am not sure how to direct either resoluteService or the function bar within it to be in scope of $scope.submit. It may be I'm thinking about it in entirely the wrong way, or it may just be something simple I'm missing. Any thoughts as to how I can resolve this?
You need to inject the service in to controller ,
app.controller('resoluteCtrl', function($scope,resoluteService) {
}
I'm trying to test my application using Mocha and Zombie.js, but I'm getting an "Error: timeout of 2000ms exceeded" when trying to load the page.
As I could see, it seems that the "Backbone.history.start();" is affecting it somehow and preventing Zombie.js to assert that the page has finished loading.
If I comment out the "Backbone.history.start();" line, my application will not start, but the Zombie.js will think that the page has finished loading.
The code below is an example of a code that is not working.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="../public/js/vendor/jquery.js"></script>
<script src="../public/js/vendor/json2.js"></script>
<script src="../public/js/vendor/underscore.js"></script>
<script src="../public/js/vendor/backbone.js"></script>
<script src="../public/js/vendor/backbone.marionette.js"></script>
<script type="text/javascript">
var Application = new Marionette.Application();
Application.on("initialize:after", function() {
if (Backbone.history) {
Backbone.history.start();
}
if (Backbone.history.fragment === "") {
Backbone.history.navigate("something", {});
}
});
Application.start();
</script>
</body>
</html>
Anyone had the same issue?