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.
Related
I'm wish to use ngCordova to detect the network state of a device. However, as soon as I include cordova.js I get an error -
Uncaught ReferenceError: require is not defined (cordova.js:23)
I've installed and am successfully running Node.js and Cordova, and I've downloaded and installed ngCordova following the instructions here.
I have also installed the network-information plugin via the Cordova CLI -
cordova plugin add cordova-plugin-network-information
As per the documentation this is the code sample that I'm using (and to clarify, the error occurs as soon as I include cordova.js, so even without this code snippit I still get the error; this is show my end goal) -
var app = angular.module('myApp', ['ngCordova']);
app.controller('myCtrl', ['$rootScope', '$scope', '$cordovaNetwork', function($rootScope, $scope, $cordovaNetwork){
document.addEventListener("deviceready", function () {
var type = $cordovaNetwork.getNetwork()
var isOnline = $cordovaNetwork.isOnline()
var isOffline = $cordovaNetwork.isOffline()
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function(event, networkState){
var onlineState = networkState;
})
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
var offlineState = networkState;
})
}, false);
}]);
In my index.html file I've made sure that I have declared the files are required in the order specified -
angular.min.js
ngCordova.min.js
cordova.js
How can I fix this error?
The answer here is that the Cordova CLI automatically includes cordova.js and any necessary dependancies when you build the application.
The cordova.js file is placed in the www directory, so all you have to do is include that file -
<script type="text/javascript" src="cordova.js"></script>
It seems illogical to reference a file that you are not inculding, but once you get your head around how the CLI works it makes sense.
The main problem for beginners is that it's quite poorly documented. In fact, Cordova as a whole seems to be poorly documented, not so much in terms of quantity but rather the relevance - so much is for old versions. It's a fantastic project though, and hopefully this is something that will be addressed in the near future.
I'm using cordova-http plugin in a Steroids app. according to manual, I've added plugin in iOS config in steroids could service:
[
{"source":"https://github.com/wymsee/cordova-HTTP.git"}
]
and also I've added it in config.xml:
<js-module src="www/cordovaHTTP.js" name="cordova-HTTP">
<clobbers target="cordova-HTTP" />
</js-module>
but still I got the error telling me injected Angular model is missing.
do I need to link it to index.html knowing that manual says
<js-module> fulfills this job.
do I need to install plugin like what's mentioned in plugin's github
page:
cordova plugin add https://github.com/wymsee/cordova-HTTP.git
may you please tell me what should I do step by step to make it
work?
There are many ways to add plugins. There's an easy way:
open your command line
path/to/your/project/plugins
cordova plugin add https://github.com/wymsee/cordova-HTTP.git
Inject the plugins by adding 'cordovaHTTP'
Example: var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'cordovaHTTP']);
Use it with key word cordovaHTTP
Hopes it'll help you
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.
on the yeoman-ionic framework i've tried to add google map to my app.the problem was that every time i ran grunt serve the index.html scripts got deleted. so i've ran this:bower install --save angular-google-maps and the problem solved since it wrote the scripts on some other file in addition to index.html. the only problem is when i ran grunt serve againt i got a diffrent error and ever since then i just can't figure out what i am doing wrong...
the error:
Uncaught ReferenceError: google is not defined
i think it has something to do with some karma config file although i have no idea what this is. tried to solve this for a couple of hours and couldn't figure this out...
I was getting that error too. It turned out to be related to the order in which I loaded my script files. Try loading your script files in this order:
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src='/path/to/underscore[.min].js'></script>
<script src='/path/to/lodash.underscore[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>
Best!
You must use Google Maps SDK Async Loader.
It guarantees that angular-google-maps does not begin processing any directives until all of the Google Maps SDK is fully ready.
Configure:
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
// key: 'your api key',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization'
});
});
When is Google Maps SDK ready?:
.controller("someController", function($scope, uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function(maps) {
// write your code here
// (google is defined)
});
});
Also you can read this http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi