how to add cordova plugin to steroids app - angularjs

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

Related

How to import ionic-native into an Ionic1/AngularJS project?

I'm working on a project with Ionic v1 and AngularJS and Cordova.
I'm trying to include this firebase plugin in my project with no luck so far: https://github.com/dpa99c/cordova-plugin-firebasex
I was told to try out this node module: https://github.com/ionic-team/ionic-native#angularjs
However, I keep getting this error:
Error: [$injector:nomod] Module 'ionic.native' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
<script src="../node_modules/#ionic-native/core/ionic-native-plugin.js"></script>
How can I make this work in my project and how can I import ionic-native properly?
Actually, I'm using ionic-native 5.23.0 in my angularJS project and I believe all 5.x versions have support for this angular version. If you take a look in ionic-native/core you will notice that exists a file called ng1. That file have a function called initAngular1 who iterate across object's properties creating angularJS services. Here's what I did.
First, I opened the script that I use as entry point in my webpack.config to create a bundle (Since I already had webpack installed, I used)
Inside this script, I wrote the following:
require('#ionic-native/core');
const appVersion = require('#ionic-native/app-version');
const sqlite = require('#ionic-native/sqlite');
const statusbar = require('#ionic-native/status-bar');
const toast = require('#ionic-native/toast');
const ng1 = require('#ionic-native/core/ng1')
ng1.initAngular1({
AppVersion: appVersion.AppVersion,
SQLite: sqlite.SQLite,
Statusbar: statusbar.StatusBar,
Toast: toast.Toast
});
Run webpack
Inject ionic.native module in your app.
Inject any plugin you would like to use with a $cordova prefix.
angular.module('myApp', ['ionic.native'])
.controller('MyPageController', function($cordovaToast) {
$cordovaToast.show('Hello from Ionic Native', '5000', 'center');
});
Don't forget to install the cordova plugin used by the ionic-native plugin.
ionic-native stopped the support to angular ionic v1/angular 1,
https://github.com/ionic-team/ionic-native/tree/v3.x
For Ionic V1/Angular 1 support, please use version 2 of Ionic Native. See the 2.x README > for usage information.

Adding and using plugins on Ionic

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.

How to include and use cordova plugins

I'm struggling with cordova plugins in my ionic app. Been googling whole day, no big win yet.
here's what I'm trying to do - open a web page inside my app with navbar present. I found that cordova-themeable might work that out
...however...
I installed it
$ cordova plugin add cordova-plugin-themeablebrowser
ok, it's present
$ cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-themeablebrowser 0.2.15 "ThemeableBrowser"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.0 "Keyboard"
now, I'm trying to use it in controller function
$scope.doStuff = function doStuff() {
cordova.ThemeableBrowser.open('http://apache.org', '_blank', {
...
and call it in my .html file
<ion-item ng-click="doStuff()">
I get the following error
ReferenceError: cordova is not defined at Scope.doStuff
in my index.html, I've got
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
please help, thanks
Can you verify the plugin is in your config.xml?
It should look something like this:
<plugin name="com.phonegap.plugins.example">
<param name="APIKey" value="12345678" />
<param name="APISecret" value="12345678" />
</plugin>
would have added this as a comment, but not enough rep and only posting as i cant see any mention of any of this.
make sure it is injected properly into your app, given the error or cordova not defined i'm assuming this might be an issue. i couldnt find any specifc references to it, but considering it is built on top of the inappbrowser, i would assume the DI would be $cordovaInAppBrowserProvider.
while reading the docs, from their gitgub FAQ "I just installed this plugin, how come it just shows a blank toolbar?
The purpose of this plugin is to allow you to style the in app browser the way you want. Isn't that why you installed this plugin in the first place? Hence, it does not come with any defaults. Every UI element needs to be styled by you, otherwise it's hidden. This also avoids polluting your resouce bundle with default images."
To add a plugin you are doing right, i.e. if you want to use cordova adomb plugin:
cordova plugin add cordova-admob
Regarding to the error: Are you debugging in browser or in real device? Normally in browser, you should use
cordova platform add browser
phonegap serve
(I recommend you to use phonegap serve insetad of cordova serve as sometimes it works better, but shouldn't make the difference)
Another way to debug apps is to use android remote debug.

Jhipster display "this is your footer" only. ReferenceError: angular is not defined

I read
JHipster After creating sample entity nothing is shown in the browser
.In my case bower seem fine. It have the angularjs lib
(When use bower list). Why it still can't reference to angularjs? If you have any suggestion on where to investigate. Thanks.
Can you provide the output from your browser's JavaScript console? Look for a syntax error.
Also you can try
grunt wiredep
in order to inject your bower dependencies into your source code (normally index.html).
Your index.html has no dependencies. You can copy them from sample-app.

Bower dependencies for Angular in Eclipse

I have a web app I am launching from Eclipse using Spring Boot. I am trying to use Angular modals to have a nice looking confirm delete modal and I was following this tutorial to get the right dependencies. The Bower install seemed to go well:
bower install angular-modal-service --save
And I copy this into my html:
<script src="bower_components\angular-modal-service\dst\angular-modal-service.min.js"></script>
And I add the dependency in my Angular file:
var app = angular.module('myApp', ['angularModalService']);
But that is the point at which it fails. If I launch my app I just get a blank page, nothing at all loads. My console output from Chrome's developer tools gives me:
Uncaught Error: No module: angularModalService
This is a general problem I have had, anytime I try to add a dependency with something like
var app = angular.module('myApp', ['DEPENDENCY']);
it doesn't work. Is there something more I need to do in Eclipse in order for it to get it to pick up on my Bower dependencies?
When you have such problem, we can't resolve it for you.
But we can give you some advices to resolve this kind of problem :
Identify the problem. Open the developper tools of your navigator (F12), then the console. If you have nothing here, try to refresh. Angular will let you know if there is a dependency injection problem.
Check if you didn't forgot something. You have to import in your page angular, THEN angular-modal-service, THEN your application. The order is important.
Check if the module you want to use doesn't depend to something else. In your case, do this module needs bootstrap JS files ? Again, take a look at the console. It's here to help you.
Perhaps not specifying type="text/javascript in the script declaration causes your browser not to parse and execute the script? It is required in HTML < 5. Try adding that. Maybe that will help. Post your HTML file, if it still does not work.

Resources