I am new to phone gap and really struggling to get this done.
Basically, the directory structure is like this:
/www
css/*
img/*
js/*
pages/*
config.xml
index.html
When I try to include add images from index.html referenced in img directory, the image loads successfully. But when i try to reference an image from a page within the js directory, it does not load the image. I do it from a index.js within the js directory.
I provide the path like this when inside the js directory:
<img src="../img/abc.jpg">
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
Basically i do not invoke the cordova_plugin.js file. It is invoked by plugin.js that i include in my html.
So basically when in my www/index.html I include
<script type="text/javascript" src="phonegap.js"></script>
and it implicitly invokes the cordova_plugins.js which loads all the plugins. This works fine.
But When inside www/pages directory i reference it like this
<script type="text/javascript" src="../phonegap.js"></script>
and in this case phonegap.js loads successfully but it fails to load the cordova_plugins.js and thus none of the modules load.
Note: I found that the files do not load by debugging it in chrome.
Any help would be highly appreciated
Your javascript files are building html to go into the index.html DOM, so you should include the src as it will be referenced by index.html:
<img src="img/abc.jpg" />
Not sure what you mean here:
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
So, maybe I'm misunderstanding your problem.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
How are you referencing the .js files? For pages/foo.html it would be:
<script type="text/javascript" src="../js/cordova_plugin.js"></script>
But again, not sure exactly what you are after without some code examples.
Related
We have an ionic ios app written using Angular and one of the script file is loaded by mentioning in index.html.
The script file is hosted and the ios app has been able to load the script file so far without issue
Code snippet:
<script src="/bi/assets/js/embed-api/v1/embed-api.min.js" type="text/javascript" de></script>
Strangely now the ios app doesn't load/download the script. I tried to include the domain name also in src like this and then the app magically loads:
<script src="https://www.xyz123.com/bi/assets/js/embed-api/v1/embed-api.min.js" type="text/javascript" de></script>
I am confused by this as to why a completely normal script loading would behave strange. Any theories for this behaviour is welcome
I've started my app project using standard file organization. Then I've switched to a more elaborate folder structure.
When I run my app on Chrome through (ionic serve) everything works flawlessly but when I deploy my app to my phone through Cordova(ionic run android) it can't find the custom files I've created.
It seems like there is some sort of permission missing. Any ideas of what might be wrong?
update: the app project also exists under /platforms/android/assets/.
In that folder the "www/components/..." files exist.
path: www / templates / client.html
-----> THIS WORKS
.state('app.client', {
url: '/client',
views: {
'menuContent': {
templateUrl: 'templates/client.html',
controller: 'ClientCtrl'
}
}
})
path: www / components / client / views / client.html
-----> THIS DOESNT WORK
.state('app.client', {
url: '/client',
views: {
'menuContent': {
templateUrl: 'components/client/views/client.html',
controller: 'ClientCtrl'
}
}
})
index.html
Using chrome's debugging I noticed that the client JS files are not accessible. Hence, it could be some problem with gulp and how it copies the files into the APK file...
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="components/client/client-controller.js"></script>
<script src="components/client/client-service.js"></script>
FOUND THE PROBLEM!!
The issue was not related to folder permissions but with cached build files.
First time I've created the folder I did it with capital letters. "Components/Client/View"
After I've renamed the files both in the code and physical files the changes didn't work because the process of ionic build keeps cache of folder structure.
Deleting the content of /android/build/ folder solved the problem.
Views in an Ionic App are often referred to as templates because Angular controllers refer to them as such. Because of this, views are often stored in a /templates folder where each view is in a separate .html file. So, my suggestion would be to keep your components folder inside the templates folder such that the route for your templateUrl would be: templates/components/client/views/client.html.
Also, the controller and service filepath must be defined in the index.html. Hope it suffices your needs.
I'm building my first android app with Cordova, and there's only a small part of the app that actually needs any of the Cordova/native functionality.
In the main page of the app, which is multiple screens set up as a carousel, everything works great, but there is one other page, and once in there, I can see that the attempt to load cordova.js is returning a 404, so navigator.app is undefined and I can't access any of the native functionality.
How can I 'help' the Cordova build process make the script available in all the places it's needed?
Make sure you include cordova.js in your index.html file's headers -
<head>
<script src="cordova.js"></script>
</head>
I'm using cordova 2.1.0, and am trying to add a notification to the status bar.
I'd included the related java files and js script into the project, and added the following line in the config.xml
<plugin name="StatusBarNotification" value="com.phonegap.plugins.statusBarNotification.StatusBarNotification"/>
In my html code, I'd added the following lines in my head tag
<script src="cordova-2.1.0.js"/>
<script src="statusbarnotification.js"/>
and at the bottom of the content div page, i'd added the following script
<script>
window.plugins.statusBarNotification.notify("Message Header", "Message details");
</script>
However when i run it in emulator for android 4.0, i'm hitting the error:
Uncaught TypeError: Cannot read property 'statusBarNotification' of undefined
Anyone has encounter this issue before?
Ok my bad, it's a false alarm. I have the script file put into a js folder rather in the same folder as the cordova js file. After renaming the script src path to the correct one it is working now. Can't believe i spent few hours on this!!
I'm trying to acccess the Camera using Sencha touch, ported to Android using Phonegap. As the Sencha touch guide to using native APIs suggests, I declared the camera as a required:
Ext.require('Ext.device.Camera');
But unfortunately, I get this error:
07-19 11:51:42.159: E/Web Console(8668): Uncaught Error: [Ext.Loader]
Failed loading './device/Camera.js', please verify that the file exists at
file:///android_asset/www/lib/touch/sencha-touch-all-debug.js:8000
The sencha library does have Camera.js under device. I'm not sure why this error appears.
Edit 1: Still not able to find an answer. Would really appreciate any suggestions.
If you download the source code of sencha touch, there will be a directory named "device" in the "src" directory (after unzipping). Camera.js is in that directory. Seems sencha-touch-all-debug.js or sencha-touch-all.js not include the source code from all .js files in "device" directory. You must manually copy that directory to your android assets directory (eg the file:///android_asset/www/lib/touch/device).
or
You can copy the directory device in any place on your android assets (eg file:///android_asset/www/device). Then on the first of javascript declaration before you use sencha touch you must type the following code:
Ext.Loader.setConfig ({
paths: {
'Ext.device': 'device'
}
});
The code tells that "Ext.device" is reference to directory "device". Make sure the "device" directory is relative to the html file that calls the javascript (eg index.html). From the above code means the "device" directory is same location with the html file.
If you are using phonegap for deploying, then use Phonegap camera functionality. I have used it in my app in following way:
Add <script type="text/javascript"
src="cordova-x.x.x.js"></script> in your index.html file.
Use following code to open Camera:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
For more information on this api use following link:
http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html#Camera
On the sencha forum there is a thread about it.
The problem appears to be the naming of Phongap - Cordova. Executing this before Sencha Touch is loaded should fix that.
if(typeof window.Cordova != 'undefined') {
window.PhoneGap = window.Cordova;
}