I'm trying create ionic app project with ngCordova plugin progress indicator, but it doesn't works. Somone know How to do to make it work ?
angular.module('starter')
.controller('MyController',
function ($scope,$ionicPlatform, $state, $cordovaProgress, PopupService, $cordovaCamera) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
$scope.login = function()
{
$cordovaProgress.showDeterminateWithLabel(true, 50000, "Loading");
}
If we look at the official ngCordova documentation found here:
http://ngcordova.com/docs/plugins/progressIndicator/
It says that it works for Android and iOS, however as of right now, this is not true.
Let's dig a big deeper.
ngCordova is just a wrapper for Apache Cordova plugins, so if we visit the plugin developers page found here:
http://paolobernasconi.com/cordova-progressIndicator/
It says that only iOS is supported and Android is coming soon. However, this is not entirely true either. I personally made a revision to ngCordova found here:
https://github.com/driftyco/ng-cordova/commit/67f5f0dd2359aee3e53b0adf91c2f6c0d2c30854
The only Android ProgressIndicator commands are show and hide.
Example:
$cordovaProgress.show(message)
This might change in the future (or already has?), but as of right now there are plenty of iOS commands for ProgressIndicator, but only two for Android.
I suggest tracking the module to see if it changes since it is still alpha.
Regards,
I tried $cordovaProgress.show(message) - $cordovaProgress.show("Searching...") to be exact and it's still not working on Android.
Tested on both android emulator and physical Asus zenphone.
However definitely working for IOS.
Related
Please, I need a final step-by-step to add and use plugins with Ionic.
I lost several weeks trying to use plugins on Ionic but everytime I got plugin function "is not defined". I really need to solve this issue, but I don't got success.
First of all I'm not trying to use native plugins that uses special hardware components like camera. I'm following the steps below:
1) I created my app using cordova
2) I added my plugin using:
cordova plugin add mercadopago-plugin
3) I've inserted this following scripts on my index.html:
<script src="cordova.js"></script>
<script src="app.js"></script>
4) I created a button calling my plugin on my template.html
<button ng-click="startCheckout()"> OK </button>
5) I called my plugin on app.js
.controller('MyCtrl', function($scope) {
$scope.carrinho = allcarrinho;
var publicKey = "TEST";
$scope.startCheckout = function(){
MercadoPago.startCheckout(publicKey, prefId, null, false, success, failure);
}
})
6) I've emulated my app on the browser typing on my admin prompt command:
ionic serve
But when the plugin is called I got this error:
ReferenceError: MercadoPago is not defined
I following everything on documentation:
Plugin's documentation: http://mercadopago.github.io/px-hybrid/
How do I to fix it?
Thanks!
You probably have to inject MercadoPago in your controller:
.controller('MyCtrl', function($scope, MercadoPago /*<--here*/) {
I didn't see your full code but it has to be something like that.
or to have it not break when minifying:
.controller('MyCtrl', ['$scope', 'MercadoPago', function($scope, MercadoPago) { ....
See this
Most Cordova plugins do not work in the browser. You should try on an emulator or simulator.
Either that, or you need to wait for document.ready or ionicPlatform.ready for the plugin to initialize before trying to use it
This plugin makes native calls when you use ˝MercadoPago". It won't work in your browser, you should run it on an Android Emulator or Phone.
Try:
ionic emulate android -l -c
And it should work.
I'm trying to include this admob plugin.
I've tried everything, but whatever I do, the window.plugins.AdMob is always undefined.
I checked it on my android device and also on the ios simulator (I know it's not working in the browser).
What I did:
I added the plugin with the following command:
cordova plugin add com.google.cordova.admob
Then I tried following the instructions from the plugin, but also used the code example from here.
But whatever I do, window.plugins.AdMob is always undefined.
I also tried loading it with a 3000ms timeout (because some answers say that the plugin is not initially ready and takes some time).
I really don't have a clue what to try next or what step I missed.
I also tried the google analytics plugin and followed the tutorial here but again, the "analytics" object is undefined. What do I miss here?
Instead of using window.plugins.AdMob, please directly use AdMob, or window.AdMob.
It's defined in the plugin.xml:
<js-module src="www/AdMob.js" name="AdMob">
<clobbers target="window.AdMob" />
</js-module>
The example code you see, is for the old AdMob plugin.
1.install admob phonegap plugin
cordova plugin add https://github.com/admob-google/admob-cordova
init admob plugin
init plugin after deviceready event
admob.initAdmob("admob banner ID","admob interstitial ID");
3.show admob ads
admob.showBanner(admob.BannerSize.BANNER,admob.Position.TOP_APP);//show banner at the top of app
Take a look at this https://github.com/Dharmoslap/ng-cordova. You can use AdMob Pro as well.
I have created an app using phonegap for iphone, android and windows.
iphone and android works fine but in windows phone I am able to see only home page there is something issue with angularjs routing when I touch on any link it display page not found. Or ng-href is not redirecting to respective page.
Please help its the crical and wierd issue for me.
Thanks,
Vijay
You will need to provide more details and some code snippet of your app, otherwise it'll be difficult to answer your question.
I encountered similar issue before, and these are the things that I did to solve it:
Specify namespace in your html and put the ng-app in the html tag
<html xmlns:ng="http://angularjs.org" ng-app="app" id="ng-app">
Manually run your angular on device ready event
document.addEventListener('deviceready', function() {
angular.bootstrap(document, ['app']);
}, false);
Make sure you have included ngRoute, in your index.html
<script src="lib/angular-route.js"></script>
and in your angular
var app = angular.module('app', ['ngRoute']);
Watch out for jQuery if you are using any, sometimes it is the jQuery that is causing the problem/ incompatible.
There is also XHR problem: https://github.com/angular/angular.js/issues/4288#issuecomment-26429558, so just make sure you are using the latest Phonegap.
Just some of the general answer that I could give, hope it solve your issue.
I have an AngularJS app that I want to deploy as an app to mobile devices. I had heard about Cordova (and its AngularJS counterpart ngCordova). I will be using multiple Cordova plugins. The first one I'm trying is to detect if the user is online or not. To do that, I'm using the cordova-network-informtion plugin in the following controller via ngCordova:
'use strict';
myApp.controller('MyController', function($scope, $cordovaNetwork) {
$scope.isOnline = null;
$scope.init = function() {
// Detect if the user is on a network
console.log($cordovaNetwork.isOnline());
$scope.isOnline = $cordovaNetwork.isOnline();
console.log($scope.isOnline);
};
$scope.init();
});
When the init function gets called, I see the following in the console:
Object {getNetwork: function, isOnline: function, isOffline: function}
TypeError {stack: (...), message: "Cannot read property 'type' of undefined"}
That type error is printed thanks to global error handler. Either way, it is a result of calling $scope.isOnline = $cordovaNetwork.isOnline();. I don't understand what I'm doing wrong.
I believe the root cause is that I'm not referencing cordova.js in any way. All of the examples I see reference cordova.js. However, when I look at the package, I only see vendor specific implementations of Cordova. For instance:
cordova.windowsphone.js
cordova.android.js
cordova.ios.js
That makes sense from a deployment perspective. However, I'm still trying to do development in my browser. For that reason, I was thinking I could use ngCordova. I also thought there would be a generic cordova.js that served as an abstraction. However, I don't see one. Can someone please help me get over this hump? I sincerely appreciate it.
Your problem is, like you mentioned in your last paragraph, that you are trying to use Cordova Plugins within your browser.
This is not possible because here is no phonegap abstraction layer for your browser.
So i think you have some opportunities:
The most reliable would be to deploy it every time on your device an test it there.
Yes i know, that always takes a few seconds and is not the best if you are trying a lot of different thinks.
Another option could be to create your own mocked $cordovaNetwork in ngCordovaMocks.
Example:
angular.module('ngCordovaMocks', [])
.factory('$cordovaNetwork', [function () {
return {
getNetwork: function () {
return "Edge"
},
isOnline: function () {
return true;
},
isOffline: function () {
return false
}
}
}]);
In the app.js you then include your ngCordovaMocks instead of ngCordova and all services will be mocked ( Be sure, that only your mocked services will be available and not all ngCordova functionalities).
angular.module('myApp', ['ngCordovaMocks']);
Yes, this is a lot of work and you have to change it before your deployment. And don't forget: It's just a mock for local development. It's essential to test it on your device with the ngCordova module and cordova device connection.
Another option would be to use the Ripple Emulator , which offers some Cordova features in your browser. But i don't know if the connection is a supported one.
But then you have to integrate the cordova.js file to your index.html.
I don't what the differences between the vendor specific files are, but you should download the plain and neutral cordova.js and include it.
First off, ngCordova isn't the counterpart to cordova.js. ngCordova is a set of extensions that are meant to be used on top of Cordova. You still have to use Cordova in your app to be able to deploy your app to mobile devices.
I would recommend taking a look at ionicframework.com. The makers of ngCordova also built Ionic and it will provide you with all of the tools that you would need to be able to build out a mobile app with angular.js.
I've just recently started fooling around with Cordova for a mobile App. For now the code base is quite small. I've also used AngularJS to drive my javascript. Now that I have reached a stable state, I would like to investigate ways to unit test the code I just wrote. Thing is, I'm not finding any useful resource for the pair. Angular suggests either Karma (unit) or Protractor (scenarios), but I'm finding quite hard to bootstrap them both with a Cordova App, since this is not supposed to run inside the browser, but within some kind of container where cordova can be loaded. Are there already some good test-driven approaches in the open source market regarding test driven development of hybrid apps?
I think that correct approach would be to have cordova.mocks.js included in tests that will mock out cordova dependencies. And then unittest as usual.
I think there is no way at the moment to test the parts of cordova that would call functionality from plugins.
But you could use Karma or Protractor as you would in the browser (eventually with some mocks for cordova and cordova plugins), which require some additional if conditionals to run the app without a physical device
Ie if (window.cordova && cordova.plugins.thePluginExample) { /* Code that uses plugins [...] */ }
You can use "phonegap server" even if you're using cordova, also you can run on the device with cordova run <platform> --device.
You can track issues on the CLI output of both methods.
To help others who get here with the same question as I did...
You probably don't need to bootstrap with Cordova. Use mocks as stand-ins.
Since Cordova attaches to window, you can write your app code to inject $window and mock cordova with with standard mocking.
Example with mocha / chai:
/**
* Test case for AngularJS module that does something when platform = 'ios'
*/
describe('platform = "ios"', function() {
var $window;
beforeEach('inject', inject(function(_$window_) {
$window = _$window_;
$window.cordova = {
platformId: 'ios',
}
}));
it('verifies cordova mock platform = "ios"', function() {
expect($window.cordova.platformId).to.equal('ios');
});
it('does something', function() {
// ...
});
});